JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bar">
    <div class="left-bar">This is a bunch of content</div>
    <div class="right-bar">This is a bunch of content</div>
    <div class="clear"></div>
</div>

<div class="bar">
    <div class="left-bar">This is a bunch of content that is too long for one side</div>
    <div class="right-bar">This is a bunch of content that is too long for one side</div>
    <div class="clear"></div>
</div>

CSS

.bar {
    border:solid 1px black;
    color:white;
}
.clear {
    clear:both;
}
.left-bar {
    background:red;
    float:left;
    height:40px;
}
.right-bar {
    background:blue;
    float:right;
    height:40px;
}