JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="red">short text</div>
    <div class="green">needs to align to the right</div>
</div>

<div class="wrap">
    <div class="red">long long long long text</div>
    <div class="green">needs to align to the left</div>
</div>

CSS

div {
    border: 3px solid blue;
   padding: 5px;
}
.wrap {
    width: 200px;
    height: 110px;  
    margin-bottom: 10px;
}
.red {
    display: inline-block;
    border-color: red;
}
.green {
    float: right;
    width: 80px;
    border-color: green;
}