JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<html>
<head></head>
<body>
    <div class="container">
        <div class="innercontainer">
            <div class="sidebar">sidebar</div>
            <div class="content">Content</div>
        </div>
        <div class="footer-container"></div>
    </div>
    
</body>
</html>

CSS

html, body {

margin: 0;
 padding: 0;   
}

.container {
 background: #dedede;    
}
.innercontainer {
 height: 100%;
 border: 1px solid red;
 overflow: auto;
}

.sidebar {
 width: 200px;
 float: left; 
 min-height: 100%;
 height: auto;
 border: 1px solid green;    
}
.content {
 float: right;
 width: 100px;
 min-height: 100%;
 height: auto;
 border: 1px solid black;   
}
.footer-container {
 height: 20%;
  clear: both;
background: #efefef;    
}