JSFiddle - React, Tailwind, and code Playground

HTML

<strong>This is how it should be:</strong><br><br>
<div id="no1">
    <div class="left">This content is always left</div>
    <div class="right">This content is always right sided</div>
</div>
<br><br>
    <strong>This is baaaad:</strong><br><br>
<div id="no2">
    <div class="left">Still on the left side</div>
    <div class="right">But the long content in this div causes a linebreak, an automatic overflow would be nice, scrolling on y-axis is not very pretty, but linebreak isn't either.</div>
</div>

CSS

.left
{float: left;}
.right
{float: right;}
.left,.right{width: 50%;}