JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
    <div class="table-row">
        <nav class="table-cell">top nav</nav>
    </div>
    <div class="table-row">
        <div class="table-cell">
            <div class="table">
                <div class="table-row">
                    <aside class="table-cell">
                        left column
                    </aside>
                    <section class="table-cell">
                        right column
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

html, body {height:100%; padding:0; margin:0;}
.table {display:table; width:100%; height:100%; background:#CCC;}
.table-cell {display:table-cell; border:1px solid #666;}
.table-row {display: table-row;}

nav {height:50px; background-color:red;}
aside {width:25%; background-color:yellow;}