JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="row">
        <span id="text">Short text</span><span id="value">123</span>
    </div>

    <div id="row">
        <span id="text">A bit longer text</span><span id="value">555</span>
    </div>
    
    <div id="row">
        <span id="text">A very very very very very very very very long text</span><span id="value">555</span>
    </div>
</div>

CSS

#container {
    border: 1px solid #000000;
    width: 300px;
}

#row {
    display: inline-block;
    border: 1px solid #000077;
    width: 100%;
    clear: both;
}

#text {
    display: inline-block;
    border: 1px solid #007700;
}

#value {
    display: inline-block;
    border: 1px solid #770000;
}