JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="column">
    <div>A</div>
    <textarea class="input"></textarea>

    <div>B</div>
    <input type="text" class="input">
  </div>
  <div class="column">
    <div>C</div>
    <input type="text" class="input">

    <div>D</div>
    <input type="text" class="input">

    <div>E</div>
    <input type="text" class="input">
  </div>
</div>

SCSS

.input {
  box-sizing: border-box;
}

body {
  background: white;
}

.row {
  display: flex;
  margin: 0 -6px 0 -6px;
}

.column {
  padding: 0 6px 0 6px;
  flex-basis: 50%;
}

.input {
  width: 100%;
  font-size: 16px;
  border: 1px solid black;
  padding: 6px;
  margin-bottom: 12px;
}

textarea.input {
  resize: none;
  min-height: 96px;
}