JSFiddle - React, Tailwind, and code Playground

HTML

<div class=box>
    <div class=item>blaat</div>
    <div class=item>blaat<br>blaat</div>
    <div class=item>blaat<br>blaat<br>blaat</div>
    <div class=item>blaat<br>blaat<br>blaat<br>blaat</div>
</div>

CSS

.box { display: flex; flex-flow: row wrap; }
.item { width: 50%; }

.item:nth-child(1) { background: #ccc; }
.item:nth-child(2) { background: #ddd; }
.item:nth-child(3) { background: #eee; }
.item:nth-child(4) { background: #bbb; }