JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="container2">
        <div class="left v-text"><div>LEFT</div></div>
        <div class="right v-text"><p>RIGHT</p></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;
}
.v-text {  
  text-align: center;
}
.v-text div, .v-text p {
  display: inline-block;
  vertical-align: middle;  
}
.v-text:before {
  content: "";
  display: inline-block;
  min-height: inherit;
  height: 100%;
  vertical-align: middle;
}