JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

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

app {
    flex: 1 1 100vh;
    display: flex;
}

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

article {
    flex: 1 1 100px;
    order: 1;
    background: crimson;
}

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