JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
  <div class="block1">
    <input type="text">1
  </div>
  <div class="block2">
    <input type="text">2
  </div>
</div>

SCSS

.content {
  border: 2px solid;
  padding: 3rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.block1, .block2 {
  display: flex;
  padding: 10px;
  border: 1px solid blue;
  input {
    flex: 0 0 50%;
    width: 50%;
  }
}