JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <fieldset class="flex">
    <label>Label A1:<br/><input type="text"/></label>
    <label>Label A2:<br/><input type="text"/></label>
    <label>Label A3:<br/><input type="text"/></label>
    <label>Label A4:<br/><input type="text"/></label>
  </fieldset>
  <br/><br/>
  <div class="flex">
    <label>Label B1:<br/><input type="text"/></label>
    <label>Label B2:<br/><input type="text"/></label>
    <label>Label B3:<br/><input type="text"/></label>
    <label>Label B4:<br/><input type="text"/></label>
  </div>
</form>

CSS

* {
  padding:0;
  margin:0;
  box-sizing: border-box;
}

.flex {
  display: flex;
  flex-flow: wrap row;
  width: 100%;
  border: none;
}

.flex > * {
  flex: 0 1 50%;
  max-width: 50%;
  border: 1px solid #0f0;
  padding: 1em;
}