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;
    position:relative;
    height:40px;
}
.clear {
    clear:both;
}
.left-bar {
    background:red;
    height:40px;
    position:absolute;
    left:0;
}
.right-bar {
    background:blue;
    position:absolute;
    right:0;
    height:40px;
}