JSFiddle - React, Tailwind, and code Playground

HTML

<h2>float first: nowrap / Children: floating blocks</h2>
<div class="wrapper nowrap">
     <div class="inlineBlock floating"></div>
     <div class="inlineBlock floating float-right">r</div>
     <div class="inlineBlock">something</div>
    
</div>
<div class="clearfix"></div>
<h2>typical order: nowrap / Children: floating blocks</h2>
<div class="wrapper nowrap">
     <div class="inlineBlock floating"></div>
     
     <div class="inlineBlock">something</div>
    <div class="inlineBlock floating float-right">r</div>
</div>

CSS

/* .wrapper {
    border: 1px dashed #333;
    float: left;
    margin-bottom: 10px;
    min-width: 120px;
}

.nowrap {
    white-space: nowrap;
}
.clearfix {
    clear: both;
}

.floating {
    background: lightblue;
    border: 1px solid blue;
    float: left;
    width: 48px;
    height: 48px;
} 

.float-right {
    float: right
}
.inlineBlock {
    background: lightblue;
    border: 1px solid blue;
    display: inline-block;
    width: 48px;
    height: 48px;
}
*/