JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap clearfix">
    <div class="left">
        Looooooooong content - pushes right to next row<br>
        NOT OK
    </div>
    <div class="right">
        &nbsp;
    </div>
</div>

<div class="wrap clearfix">
    <div class="left">
        Short content - OK<br>
    </div>
    <div class="right">
        &nbsp;
    </div>
</div>

CSS

.wrap {
    width: 200px; /* this should be dynamic! */
    margin: 5px;
    border: 1px solid red;
}
.left {
    float: left;
    background-color: #CCC;
}
.right {
    float: right;
    width: 48px;
    height: 48px;
    background-color: #888;
}

/* from twitter bootstrap, to keep .wrap height right */
.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}