JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <div class="left">
                    Potentially<br>long<br>content<br>that<br>might<br>need<br>a<br>scrollbar<br>1<br>2<br>3<br>4<br>5 Fusce pulvinar sit amet massa in vulputate. Cras eros ligula, condimentum non lacus nec, maximus lacinia orci.
            </div>
            <div class="right">
                <p>The text that<br>does not change<br>and must always<br>be displayed<br>in its entirety<br>without scrollbar.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod nibh ex, sit amet vulputate ipsum luctus non.</p>
            </div>
        </div>
    </body>
</html>

CSS

.container {
                display: flex;
            }
            .left {
                flex: 1;
                background-color: cornflowerblue;
                overflow-y: auto;
            }
            .right {
                background-color: aquamarine;
                flex: 1;
            }