JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="header">HEADER</div>
    <div class="body">
        <div class="menu">
            <ul>
                <li>Menu item #1</li>
                <li>Menu item #2</li>
            </li>
        </div>
        <div class="content">
            CONTENT GOES HERE
        </div>
    </div>
    <div class="footer">FOOTER</div>
</div>

CSS

*{
  margin: 0;
  padding: 0;
}

.wrapper{
    position: relative;
    display: flex;
    flex-direction: column;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
}

.header{
    flex: 0 0 auto;
    background: red;
}

.body{
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
}

.menu{
    flex: 0 0 20%;
    background: yellow;
}

.content{
    flex: 0 0 80%;
    background: blue;
}

.footer{
    flex: 0 0 auto;
    background: green;
}