JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"> HEADER </div>
    
<div id="l_sidebar"> L_SIDEBAR </div>
<div id="main"> MAIN CONTENT </div>
<div id="r_sidebar"> R_SIDEBAR </div>
    
<div id="footer"> FOOTER </div>

CSS

#header {
    height:20px;
    background-color:yellow; 
    text-align:center;
}
#l_sidebar {
    float: left;
    width: 100px;
    background-color:#ccc;
    text-align:center;
}
#main {
    float: left;
    width: calc(100% - 200px);
    height: calc(100% - 40px);
    background-color:green; 
}
#r_sidebar {
    float: right;
    width: 100px;
    background-color:#ccc;
    text-align:center;
}
#footer {
    height:20px;
    background-color:yellow; 
    text-align:center;
    clear: both; 
}