JSFiddle - React, Tailwind, and code Playground

by Niels Harbo

HTML

<div id="main">
      
    <div id="container">
        middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div <br />bit taller
    </div>
<div id="primary">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
      </div>
</div>

CSS

#main { 
  width: 100%; 
}
#primary { 
  width: 100px;
  display:table-cell;
  background-color: #fcc;
}
#container { 
    display:table-cell;
  background-color: #cfc; 
  overflow: auto;
}

@media screen and (max-width: 500px) {
    #primary, #container{
         width: 100%;   
    }
    #container{
        display:block;
    }
    #primary{
        display:block;
        width:100%;
    }
}