JSFiddle - React, Tailwind, and code Playground

HTML

CASE 1
<div>
    
    <div class="float">1</div>
    <div class="float">2</div>
</div>
<div>
    <div>anything other</div>
</div>
<br />
CASE 2
<div>
    
    <div class="float">1</div>
    <div class="float">2</div>
    <div>anything other</div>
</div>
<br />
CASE 3
<div>
    <div>anything other</div>
    <div class="float">1</div>
    <div class="float">2</div>
    <div>anything other</div>
    <div class="float">1</div>
    <div class="float">2</div>
    <div>anything other</div>
</div>

CSS

.float {
    float: left;
}
.float + .float::after {

    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }


/* this works for CASE 2 + 3 */
.float + :not(.float) {
    clear: both;
}