JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>
<app>
    <nav>Left Nav</nav>
    <article></article>
    <aside>Right Nav</aside>
</app>

CSS

html, body {
    margin:0;
    height:100%;
    min-height:100%;
}

body {
    margin:0;
    display: flex;
    flex-direction: column;
}

header { 
    z-index: 0;
    flex: 0 64px;
    display: flex;
    background: black;
}

app {
    flex: 1;
    display: flex;
    border: 10px solid yellow;
}

nav {
    flex: 0 0 256px;
    order: 0;
    background: cornflowerblue;
}

article {
    flex: 1;
    order: 1;
    background: crimson;
    overflow: auto;
}

aside {
    flex: 0 0 256px;
    order: 2;
    background: cornflowerblue;
}