JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="left">
        <p>
            Left<br />
            Left<br />
            Left<br />
            Left<br />
            Left<br />
            Left<br />
        </p>
    </div>
    <div class="right">
        <p>Right. Some more text here, to show how odd the line breaks...</p>
    </div>
</div>

CSS

* { margin: 0; padding: 0; }
.row { width: 300px; background: yellow; overflow: hidden; }
.left { width: 100px; background: red; float: left; }
.right { margin-left: 100px; background: green; overflow: hidden; }