JSFiddle - React, Tailwind, and code Playground

HTML

<p>Shrink to fit version</p>
<div class="float">
    <div class="float box"></div>
    <div style="border: 2px solid red;">
        <div class="float box"></div>ABC
    </div>
</div>

<p>Non-shrink to fit version</p>
<div class="float" style="width: 150px">
    <div class="float box"></div>
    <div style="border: 2px solid red;">
        <div class="float box"></div>ABC
    </div>
</div>

CSS

.float {
    float: left;
}

.box {
    width: 50px;
    height: 50px;
    background: black;
}

p {
    clear: both;
    font-weight: bold;
}