JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
<div class="one">
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem sapiente dolorum nesciunt porro ducimus eum quisquam sequi commodi suscipit ipsum harum molestias in laboriosam hic officiis, asperiores soluta voluptatum iure.</p>
</div>
<div class="two">
  <div class="child">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos doloremque, saepe reiciendis facere porro commodi in dicta nostrum similique magni nesciunt voluptatem molestias a obcaecati sunt illo, excepturi exercitationem harum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt incidunt non quo doloremque cumque labore, dolores illum accusamus quidem voluptatem? Nemo labore, neque repudiandae vel quia et inventore ut rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, est aperiam nesciunt, repudiandae voluptate molestiae maxime. Maiores fuga dolores provident perferendis ut incidunt, natus at, quo recusandae magnam cumque laudantium? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error sequi, ipsam eius repellendus enim officia quia dolorum mollitia inventore qui tempore, rem corporis eaque eligendi sed sunt beatae autem, magnam. </p>
    </div>
</div>
</div>

CSS

body{
	margin:0;
}
.table {
  display: table;
  height: 350px;
  width: 700px;  
}
.one {
  display: table-cell;
  width: 50%;
  border: 1px solid;
  
}
.two {
  display: table-cell;
  width: 50%;
  height: 100%;  
  border: 1px solid;
  position: relative;
  overflow: auto;
}

.child {
  padding: 0 20px;
  position: absolute;
  overflow: auto;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.hide {
  display: none;
}