JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<div class="container">
<div class="menu">menu - 80% of .container</div>
<div class="content">
<div class="contentin">inner width of .content<br>
content content content content content content content content content content content content content content content content content content content content content content content content content content content content ...</div>
</div>

</div>

CSS

.container{position:relative; margin:10px auto auto auto; width:80%; height:400px; border:1px solid black; background:#eee; }
.menu{background:green; position:absolute; top:0; left:calc(10% - 2px); width: calc(80% - 13px); height:30px;z-index:1;  color:yellow;}
.content{width:100%; height:100%; position:relative; margin:auto; overflow-y:scroll;}
.contentin{position:relative; margin:auto; width:80%; background:aqua; padding-top:30px; z-index:0; min-height:100%;}