JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar">
  <div id="scrollable">
      Some long content. Some long content. Some long content. Some long content. Some long content. Some long<br>long<br>long<br>long<br>long<br>long<br>long<br> content. Some long content. Some long content. Some long content. Some long content. Some long content. Some long content. Some long content. Some long content. Some lo Some long content. 
  </div>
  <div id="preview">
    Preview (visible conditionally, with unknown height)
  </div>
</div>

CSS

body {
    line-height: 2.5em;
}

#sidebar {
    height: 100%;
    width: 200px;
    
    position: absolute;
    
    background: #f0f0f0;
    border: solid 1px blue;
}

#scrollable {
    overflow-y:scroll;
    display:absolute;
    
    
    border:solid 1px #808080;
    margin:5px;
}

#preview {
    display:absolute;
    bottom:0px;
    background: red;
    margin:5px;
    width: 100%;
}

JavaScript

$('#preview').click(function(){$(this).hide()});