JSFiddle - React, Tailwind, and code Playground

HTML

<div id="report">
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="b">B</div>
    <div class="b">B</div>
    <div class="b">B</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
</div>

CSS

.a, .b{
    float: left;
}

.b ~ .b{
    display:none;
}