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;
}

#slyFrame_child {
 padding: 0px;
float: right;
overflow: hidden;
height: 500px;
width: -webkit-calc(100% - 128px);
width: -moz-calc(100% - 128px);
width: calc(100% - 128px);
border: 1px solid #333;
}

div#slyScrollbar_child {
    padding: 0px;

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