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 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 div middle div middle div middle div middle div middle div middle div middle div middle div  div middle div middle div middle div middle div middle div middle div middle div middle div 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;
  position: absolute;
  background-color: #fcc;
    right: 0;
    top: 0;
}
#container { 
  background-color: #cfc; 
  overflow: auto;
}

.filler{
    content: '';
    display: block;
    float: right;
    width: 115px;
}
@media screen and (max-width: 500px) {
    #primary, #container{
         width: 100%;   
    }
    #primary{
        float:none;
        position: static;
    }
    .filler{
        display: none;
    }
}
}

JavaScript

$('#container').prepend("<span class='filler'></span>");
var h = $('#primary').outerHeight();
$('.filler').css('height',  h + 15 + 'px');