JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">Header</div>  
    
    <div id = "wrap" >
        <div id="sidebar">Side bar</div>
        <div id="content">Content</div>
    </div>

    <div id="footer">Footer</div>

CSS

body {
    margin:0;
    padding:60px 0 50px 0;
}

div#header {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    padding: 5px 0 5px;
    overflow:auto; 
    zoom: 1;
    background-color: #800080;
}

div#footer {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:50px;
    background-color: #800080;
}
 #sidebar {  width:20%;float:left; background-color:red; min-height:200px;}
 #content {  width: 80%;float:right;background: green; min-height:200px;}