JSFiddle - React, Tailwind, and code Playground

HTML

<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 id="rightPanel">right panel</div>

CSS

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

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

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