JSFiddle - React, Tailwind, and code Playground

HTML

<section id = "leftColumn">
<div class="small">small</div>
<div class="medium">medium</div>
<div class="large">large</div>    
</section>
<section id = "rightColumn">
<div class="xlarge">xlarge</div>
<div class="xlarge">xlarge</div>
<div class="xlarge">xlarge</div>
</section>

CSS

div {
    background-color:lime;
    margin:2%;
    display:block;
}

#leftColumn {
    float:left;
    display:inline-block;
    width:50%;
}
#rightColumn {
    float:left;
    display:inline-block;
    width:50%;
}
.small {height: 100px; }
.medium {height: 150px; }
.large { height: 200px; }
.xlarge { height: 300px;font-size:28px; }