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

div {
    position: absolute;
}
#header, #footer {
    width: 100%;
    text-align:center;
    background-color:yellow; 
}
#header {
    top: 0;
    height:20px;
}
#footer {
    bottom: 0;
    height:20px;
}
#l_sidebar, #main, #r_sidebar {
    top: 20px;
    bottom: 20px;
}
#l_sidebar {
    left: 0;
    width: 100px;
    background-color:#ccc;
    text-align:center;
}
#main {
    left: 100px;
    right: 120px;
    background-color:green; 
}
#r_sidebar {
    right: 0;
    width: 120px;
    background-color:#ccc;
    text-align:center;
}