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

body{
    text-align:center;
}
.container {
    display: inline-block;
    width: 90%;
}
header {
    background-color: green;
    height: 200px;
    margin: 10px;
}
footer {
    background-color: red;
    height: 100px;
     margin: 10px;
}
.body {
    display: flex;
    flex-direction: row;
    height: 650px;
    
}
.side {
    background-color: yellow;
    flex: 0.5 1 0;
    margin: 10px;
}
.middle {
    background-color: teal;
    flex: 2 1 0;
    margin: 10px;
}