JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <header> I'm a header idiot</header>
    <div class="body">
        <div class="side"> Stuff</div>
        <div class="middle">More Stuff</div>
    </div>
    <footer>SHEEEEEEEEEET</footer>
</div>

CSS

.container{
        position:center;
      
    }

    header {
        height:200px;
        background-color:green;
    }
    footer {
        height:100px;
        background-color:red;
    }

    .body {
        display:flex;
        flex-direction:row;
        height:650px;
    }

    .side {
        background-color:yellow;
        flex:0.5;
    }

    .middle {
        background-color:teal;
        flex:2;
    }