JSFiddle - React, Tailwind, and code Playground

by KendoDev

HTML

<div class="Container">
<div id="treeview" >
<br> 1 </br>
<br> 1 </br>
<br> 1 </br>
<br> 1 </br>
<br> 1 </br>
<br> 1 </br>
<br> 1111111111111111111111111111111111111 </br>
<br> 1 </br>
<br> 1 </br>
</div>



<div id="content" >
<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1
<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1
<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1
<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1
<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1
<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1<br> 1 </br>1

    
</div>



</div>

CSS

#treeview {
    position: absolute; 
    left: 0px; 
    width: 260px; 
    top: 0px; 
    bottom: 0px; 
    overflow: auto; 
    border-right: 1px solid gray;
}

#content {
    position: absolute; 
    left: 270px; 
    right: 0px; 
    top: 0px; 
    bottom: 0px; 
    overflow: auto;
}