JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div class="first">abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />abc
<br />
</div>
<div class="second">xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />xyz
<br />
</div>
</div>
CSS
#wrapper {
width:284px;
height:300px;
position:relative;
}
.first {
width:300px;
height:300px;
border:1px solid #000;
overflow:auto;
position:fixed;
text-align:center
}
.second {
width:100px;
height:100%;
position:absolute;
top:0;
right:0;
border:1px solid blue;
text-align:center;
overflow:auto
}