JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
<div class="left-col">
    <p>Left col</p>
</div>
<div class="right-col">
    <p>Right col</p>
    <p>And some extra text in here</p>
    <p>And some extra text in here</p>
     <p>Right col</p>
    <p>And some extra text in here</p>
    <p>And some extra text in here</p>
     <p>Right col</p>
    <p>And some extra text in here</p>
    <p>And some extra text in here</p>
</div>
</div>

CSS

#content { position: relative; width: 600px; overflow: hidden; }

.left-col { background: red; width: 300px; position: absolute; top: 0; bottom: 0; left: 0; right: 300px; }

.right-col { background: blue; width: 300px; float: right; }