JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="container2">
        <div class="left">LEFT</div>
        <div class="right">RIGHT</div>
        <div class="clear"></div>
    </div>
</div>

CSS

.container2 {
    padding: 30px;
    border: 1px solid #000;
}

.left {
    float:left;
    height: 50px;
}

.right {
    float: right;
    vertical-align: middle; /* не работает */
}

.clear {
    clear: both;
    height: 0;
}