JSFiddle - React, Tailwind, and code Playground

HTML

<div class="theContainer">
    <section>One</section>
    <section>Two</section>
</div>

<div class="theContainer">
    <section>One</section>
    <section>Two</section>
    <section>Three</section>
</div>

CSS

.theContainer{
    width: 300px;
    border: 1px solid blue;
}

.theContainer section{
    display: block;
    border: 1px solid red;
    float:left;
}

.theContainer section:nth-last-child(2),
.theContainer section:nth-last-child(2) ~ section { width: 49%; }

.theContainer section:nth-last-child(3),
.theContainer section:nth-last-child(3) ~ section{ width:  32%; }