JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <span class="x">x</span>
    <span class="y">y</span>
    <span class="z">z</span>
</div>

<div class="container">
    <span class="a">a</span>
    <span class="b">b</span>
    <div class="inner-container">
        <span class="c">c</span>
    </div>
</div>

CSS

.container { border:1px solid red; margin-bottom:10px; }
.z { float: right; }
.inner-container { text-align:right; }