JSFiddle - React, Tailwind, and code Playground

HTML

<hgroup class="case1">
    <h2>Floating boxes</h2>
    <whatever>
        <div class="box1">
            Box 1!
        </div>
        <div class="box2">
            Box 2!
        </div>
    </whatever>
</hgroup>

CSS

/* Rules for all cases */

.box1, .box2 {
    border: 1px solid;
    padding: 1em;
}

.box1 {
    color: red;
}

.box2 {
    color: green;
}

/* Rules for case 1 */

.case1 .box1 {
    float: left;
}

.case1 .box2 {
    float: right;
}