JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clearfix">
    <div class="l"></div>
    <div class="r">
        <div class="inner">Lorem ipsum dolor</div>
    </div>
</div>


<div class="clearfix"> 
    <div class="l"></div>
    <div class="r">
         <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent est tortor, ultrices a egestas in, tincidunt at orci. Curabitur quis velit et massa placerat eleifend non id tellus. Nunc vel enim felis, ac varius turpis. Praesent vitae ligula quis felis auctor vestibulum. Praesent eu fermentum tortor. Sed pretium consectetur semper.</div>
    </div>
</div>

CSS

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.l {
    width: 200px;
    height: 50px;
    float:left;
}
.r {
    background-color: blue;
    overflow: hidden;
    text-align: right;
    white-space: nowrap;
}
.r .inner {
    background-color: yellow;
    text-align: left;
    display: inline-block;
    //display:inline;
    //zoom:1;
}