JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">

</div>

<div class="content">
    <div class="menu"></div>
    <div class="preview"></div>
</div>

<div class="footer">
    footer
</div>

CSS

html,body {
    height: 100%;
    margin:0px;
    padding:0px;
}


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

body > * {
    flex-shrink: 0;
}


.header{
    background-color: yellow;
    height:50px;
}

.content{
    flex-grow: 1;
    display:flex;
    flex-direction:row;
}

.menu{
    background-color: tomato;
    width:300px;
    flex-grow: 0;
}

.preview{
    background-color: lightgreen;
    flex-grow: 1;
}

.footer{
    height:50px;
    background-color:lightblue;
}