JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top">
    TOP
</div>
<div class="left">
    LEFT
</div>
<div class="main">
    MAIN
</div>
<div class="footer">
    FOOTER
</div>

CSS

.top {
        position:absolute;
        left:0; right:0;
        height: 92px;
    }
    .left {
        position:absolute;
        left:0; top:92px; bottom: 0; bottom:92;
        width: 178px;
    }
    .main {
        position: absolute;
        left:178px; top:92px; right:0; bottom:92;
        height: 100%;
    }
    .footer {
        position:absolute;
        left:0; right:0;
        height: 92px;
        bottom:0;
        background: green;
    }

.top { background: blue; }
.left { background: red; }
.main { background: yellow; }