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
}