JSFiddle - React, Tailwind, and code Playground

by william

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css">
<div id="page">
    <div id="contentContainer">
        <div id="content">
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
            <p>long content</p>
        </div>
    </div>
    <div id="rightPanel">right panel</div>
</div>

CSS

html, body { margin: 0; padding: 0; }

#page {
    width: 100%;
    position: relative;
}

#contentContainer {
    overflow: auto;
}

#content {
    border: red 1px solid;
    margin-right: 25%; /* right margin + rightPanel's width */
    margin-left: 15%;  /* left margin */
}

#rightPanel {
    position: absolute;
    
    height: 99%;
    width: 10%;
    margin-right: 15%; /* right margin */
    top: 0;
    right: 0;
    
    border: green 1px solid;
}

JavaScript

$('#contentContainer').height($(window).height());