JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
      <div id="primary">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
      </div>
      <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>

CSS

#main { 
  width: 100%; 
}
#primary { 
  width: 100px;
  float: right;
  background-color: #fcc;
}
#container { 
  background-color: #cfc; 
  overflow: auto;
}

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