JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent gray">
    <div class="child blue">child</div>
    <div class="child no-left-margin pink">
        <div>child</div>
        <div class="parent light-pink column margin-top">
            <div class="child yellow">child</div>
            <div class="child no-top-margin green">child</div>
        </div>
    </div>
</div>

CSS

*{margin:0;padding:0;}
html,body{height:100%;width:100%;}
.parent{display:flex;align-items:stretch;flex-flow:row wrap;}
.column{flex-direction:column;}
.child{flex:1 0;margin:10px;padding:5px;}
.no-left-margin{margin-left:0;}
.no-top-margin{margin-top:0;}
.margin-top{margin-top:5px;}
.blue{background-color:#A6D1ED;}
.gray{background-color:#A7A7A7;}
.green{background-color:#60E660;}
.light-pink{background-color:#F9D4D4;}
.pink{background-color:#EDA6A6;}
.yellow{background-color:#F3F35B;
position: }