JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-div">
  <div class="horizontal">
    <p class="headerText">
      Header is here. The scrollable content should not overlap. 
    </p>
    <div class="myBox">
    
    </div>
  </div>
  <div>
    
  </div>
</div>

CSS

.myBox {
  width: 300px;
  height: 50px;
  background-color: red;
  z-index: 2;
}
.headerText {
  z-index: 1;
}