JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="blockFixed clearfix">
    <ul>
      <li>Jacky Chan</li>
      <li>Bruce Lee</li>
      <li>Chuck Norris</li>
    </ul>
  </div>
  <div class="blockScroll">
  Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris vitae ministro praesente paterfamilias uxori susurrasset in aurem, velut Amphiarao referente aut Marcio, quondam vatibus inclitis, postridie disceret imperator. ideoque etiam parietes arcanorum soli conscii timebantur.
  Circa hos dies Lollianus primae lanuginis adulescens, Lampadi filius ex praefecto, exploratius causam Maximino spectante, convictus codicem noxiarum artium nondum per aetatem firmato consilio descripsisse, exulque mittendus, ut sperabatur, patris inpulsu provocavit ad principem, et iussus ad eius comitatum duci, de fumo, ut aiunt, in flammam traditus Phalangio Baeticae consulari cecidit funesti carnificis manu.
  </div>
</div>

<div class="container">
  <div class="blockFixed clearfix">
    <ul>
      <li>Jacky Chan</li>
      <li>Bruce Lee</li>
      <li>Chuck Norris</li>
    </ul>
  </div>
  <div class="blockScroll">

  </div>
</div>

CSS

.container {
  position: relative;
  margin: 0 auto 1em;
  border: solid 1px #c5c5c5;
}
.blockFixed {
  width: 30%;
  min-height: 4em;
  background: lightblue;
  color: black;
}
.blockScroll {
  position: absolute;
  width: 70%;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f1f1f1;
}

.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table; 
}
.clearfix:after {
    clear: both;
}