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;
    /*display: table-row;*/
}
.left {
    /*float: left;*/
    display: table-cell;
    width: 220px;
    border: 1px solid blue;
    text-align: center;
    vertical-align: middle;

}
.right {
    /*float: right;*/
    display: table-cell;
    width: 220px;
    border: 1px solid blue;
    vertical-align: middle;
}