JSFiddle - React, Tailwind, and code Playground

by Mohamed Rias

HTML

<div id="main">
<div id="left">
<ul class="list">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>    
		</ul>


</div>
<div id="right">test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test test made in test made in test madein<br />

test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br />test test made in test made in test madein<br...

CSS

#main{width:100%;display:table;table-layout:fixed;border:1px solid red;position:relative; }
ul{list-style:none;padding:0;margin:0;overflow-y:scroll;height:100%;}
#left {               
    display: table-cell;
    width:250px; 
	// min-width:100px;
    vertical-align:middle; 
    text-align:left;
	background:red;
    display: none;
	}

#right {               
    display: table-cell;
    width:100%; 
    vertical-align:middle; 
	text-align:left;
    background-color:#ccc;
}

JavaScript

var leftDiv = document.querySelector("#left"),
        rightDiv = document.querySelector("#left");
    if(leftDiv.getBoundingClientRect().width === 0 && leftDiv.getBoundingClientRect().height === 0) {
         rightDiv.classList.add("fullWidth");
    } else {
         rightDiv.classList.remove("fullWidth");
    }