JSFiddle - React, Tailwind, and code Playground

HTML

<div id="w">
<p class="l">floated left left left left left left left left left left left left left left left left left left left</p>
<p class="r">floated right right right right right right right right right right right right right right right right</p>

<div class="clear-both"></div>
</div>

CSS

.clear-both{
 clear:both;   
}.l{
 float:left;
 width: 50%;
}
.r{
 float:left;
 width: 50%;
 text-align: right;
}
#w{
 border:1px solid red;   
}