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 id="A" class="column small-12 large-8">
        <h1>
          A
        </h1>
    </div>

    <div id="B" class="column small-12 large-4">
        <h1>
          B<br>B<br>B
        </h1>
    </div>

    <div id="C" class="column small-12 large-8">
        <h1>
          C<br>C<br>C<br>C<br>
        </h1>
    </div>

    <div id="D" class="column small-12 large-4">
        <h1>
          D
        </h1>
    </div>
</div>

CSS

#A {
  background-color: red;
}
#B {
  background-color: blue;
}
#C {
  background-color: cyan;
}
#D {
  background-color: green;
}