JSFiddle - React, Tailwind, and code Playground

HTML

<p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p> <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p> <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    
    
<div class="right content-container">

  <div class="inner-scroll-pane">
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
  </div>
</div>

CSS

.right {
  margin-left: 50%;
}

.content-container {
  position: fixed;
  top: 0px;
  bottom: 20px;
  /*left: 0px;*/
  right: 0px;
  overflow-x: hidden;
  overflow-y: auto;
  background: gray;
}

.inner-scroll-pane {        
    overflow: hidden;
}

.inner-scroll-pane p {
  padding: 20px;
}