JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div id="one">One!</div>
    <div id="container">
        <div id="two">Two!</div>
        <div id="three">Three!</div>
    </div>
    <div id="four">Four!</div>
</div>

CSS

.container { overflow:hidden; /* Clear Floats */ width:100%; }
#one, #two, #three, #four, #container { float:left; }
#one { width:100%; background-color:red; height:75px; }
#two { width:33%; background-color:blue; height:100%; }
#three { width:67%; background-color:green; height:100%; }
#four { width:100%; background-color:yellow; height:75px; }
#container { width:100%; height:100px; background-color: gray; }