JSFiddle - React, Tailwind, and code Playground

HTML

<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 {
    display: flex;/*create a flexbox (style it like a block item)*/
    display: -webkit-flex; /* Safari */
    flex-wrap: wrap;/*items in the flexbox will drop down when they do not fit this div*/
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    justify-content: space-between;/*spaces content on a row keeping an item on the right and one on the left and creating empty space inbetween unless the next item fits in this space in which case the browser will do that (same effect as float: left, only with a better transition)*/
    width: 50%;
    border: 3px solid blue;
    padding: 5px;
}
.red {
    border-color: red;
    flex: 0 1 180px;/*all you need to know here is that the 3th value is the width of the item*/
    -webkit-flex: 0 1 180px; /* Safari 6.1+ */
    -ms-flex: 0 1 180px; /* IE 10 */

}
.green {
    border-color: green;
    flex: 0 1 100px;/*all you need to know here is that the 3th value is the width of the item*/
    -webkit-flex: 0 1 100px; /* Safari 6.1+ */
    -ms-flex: 0 1 100px; /* IE 10 */
}