JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="top">
    <div class="header">
        sdadadad
    </div>
    <div class="headerNav">
        <ul>
            <li>Home</li>
            <li>TimeOff</li>
            <li>Request</li>
            <li>Logout</li>
        </ul>
    </div>
</div>
<div class="body">
      <div class="sideNav">
          sdadadadad
    </div>
    <div class="main">
        adadadadad
    </div>
</div>
</div>
<div class="footer">
    sdfsfdasffeffe
</div>

CSS

.wrapper {
    min-height: 100%;
    height: auto !important;
	height: 100%;
	margin: 0 auto -20px;
    padding: 0;
}
.header,
.sideNav,
.main,
.footer {
    padding: 10px;
}
.top,
.body,
.footer {
    margin: 0 auto;
    height: auto;
    width: 100%;
}
.header {
    background: #666;
    height: 100px;
}
.headerNav,
.footer {
    background: #999;
    height: 20px;
}
.headerNav ul {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
}
.headerNav ul li {
    display: inline;
    border-right: 1px solid;
    padding: 0 15px 0 15px;
}
.headerNav ul li:first-of-type {
    border-left: 1px solid;
}
.body {
    clear: both;
    display:flex;
    flex-direction: row;
    align-items: stretch;
}
.body div {
    height: 100%;
}
.sideNav {
    border-right: 1px solid;
    float: left;
    width: 25%;
}
.main {
    float: left;
    width: 65%;
}
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
}