JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation-flex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

  <div class="row profile align-top">
    <div class="left column  small-12 large-6">
      <div id="A" class="column large-12">
          <h1>
            A
          </h1>
      </div>
      <div id="C" class="column large-12">
          <h1>
            C<br>C<br>C<br>C<br>
          </h1>
      </div>
    </div>
    <div class="right column small-12 large-6">
      <div id="B" class="column large-12">
          <h1>
            B<br>B<br>B
          </h1>
      </div>
      <div id="D" class="column large-12">
          <h1>
            D
          </h1>
      </div>
    </div>
</div>

CSS

#A {
  background-color: red;
}
#B {
  background-color: blue;
}
#C {
  background-color: cyan;
}
#D {
  background-color: green;
}
.columns{
  margin: 0;
}
.left{
  width: 50%;
}

.right{
  width: 50%;
}