JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

<div class="row">
    <span class="left">L1</span>
    <span class="right">R1
    <br/>Dynamic field = dynamic height
    </span>
    </div>



<div class="row">
    <span class="left">L2</span>
    <span class="right">R2
    <br/>This might be longer
    <br/>like this long
    <br/> or even this long
    </span>
    </div>



<div class="row">
    <span class="left">L3</span>
    <span class="right">R3</span>
    </div>
    
    
</div>

CSS

#wrapper {
    width: 500px;
    border: 1px solid black;
}

.row {
    width: 450px;
    border: 1px solid red;
    overflow: hidden;
    margin: 0px auto;
}
.left {
    float: left;
    width: 220px;
    border: 1px solid blue;
}
.right {
    float: right;
    width: 220px;
    border: 1px solid blue;
}