JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    <div class="header-inner"></div>       
</div>
<div class="content">
    <div class="sidebar left">
        <div class="sidebar-inner"></div>
    </div>
    <div class="content-inner"></div>
<div class="sidebar right">
        <div class="sidebar-inner"></div>
    </div>
</div>
<div class="footer">
    <div class="footer-inner"></div>
</div>

CSS

/* Temp styles */
.header, .sidebar, .content, .footer { border: 5px solid black; }
.content, .sidebar, .footer { border-top: none; }
.sidebar.right { border-right: none; }
.sidebar.left { border-left: none; }
/* Core styles */
.header {
    position: relative; /* needed for stacking */
    height: 100px;
    width: 100%;
}
.content {
    position: relative; /* needed for stacking */
    width: 100%;
    height: 500px;
}
.sidebar {
    position: relative; /* needed for stacking */
    width: 20%;
    height: 100%;
    border-top: none;
}
.sidebar.left { float: left; }
.sidebar.left:after,
.sidebar.right:after {
    clear: both;
    content: "\0020";
    display: block;
    overflow: hidden;
}
.sidebar.right { float: right; }
.footer {
    position: relative; /* needed for stacking */
    width: 100%;
    height: 100px;
}