JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slyFrame_parent">
    P
</div>
<div id="slyScrollbar_parent">
    S
</div>
<div id="slyScrollbar_child">
    S
</div>
<div id="slyFrame_child">
    P
</div>

CSS

#slyFrame_parent {
    padding: 0px;

    float: left;
    height: 500px;
    width: 60px;
    border: 1px solid #333;
}

div#slyScrollbar_parent {
    padding: 0px;

	float: left;
	height: 500px;
	width: 16px;
    border: 1px solid #333;
    border-left: 0px none;
    margin-right: 10px;
}

#slyFrame_child {
    padding: 0px;

    overflow: hidden;
    height: 500px;
    width: auto;
    border: 1px solid #333;
}

div#slyScrollbar_child {
    padding: 0px;

	float: right;
	height: 500px;
	width: 16px;
    border: 1px solid #333;
    border-left: 0px none;
}