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

html, body { height: 100%; }

.box { 
    display: flex; 
    flex-flow: row wrap;
    height: 50%;
}
.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; }