JSFiddle - React, Tailwind, and code Playground

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 {
  position: relative;
  padding-right: 100px;
}
#primary { 
  width: 100px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fcc;
}
#container { 
  background-color: #cfc; 
  overflow: auto;
}

@media screen and (max-width: 500px) {
    #main {
        padding-right: 0;
    }
    #primary, #container{
         width: auto;   
    }
    #primary{
        position: static;
    }
}
}