JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
        <div id="nav">nav<br>several<br>lines of text</div>
        <div id="header">header</div>
        <div id="sales">sales</div>
        <div id="products">products<br>several<br>lines of text</div>
        <div id="footer">footer</div>
    </div>

CSS

#wrapper {positioN:relative;background:#ccc;margin:20px;padding-top:100px;}
#header {position:absolute;top:0;width:100%;height:100px;background:red;}
#nav {float:left;width:25%;background:green;}
#sales {float:left;width:75%;background:blue;}
#products {margin-left:25%;background:yellow;}
#footer {clear:left;background:orange;}