JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="w100"></div>
    <div class="w100"></div>
    <div class="w50"></div>
    <div class="w50"></div>
</div>

<div class="box">
    <div class="h50"></div>
    <div class="w100"></div>
    <div class="w100"></div>
    <div class="h50"></div>
</div>

<div class="box">
    <div class="w100"></div>
    <div class="w100"></div>
    <div class="w100"></div>
</div>

CSS

html,body {height:100%;}

.box {
    float:left;
    width: 100px;
    min-height: 100%;
    background:red;
}

.box div {    
    background:green;
    margin: 1%;
}

.w100 {
    width:98%;
    height:100px;
}
.w50 {
    width:48%;
    height:100px;
    float:left;
}
.h50 {
    width: 98%;
    height:50px;
}