JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<div>
    <span class="side-a">a</span>
    <span class="side-a">b</span>
    <span class="side-a">c</span>
    <span class="side-a">d</span>
    <span class="side-a">e</span>
    <span class="side-a">f</span>
    <span class="side-b">1</span>
    <span class="side-b">2</span>
    <span class="side-b">3</span>
    <span class="side-b">4</span>
    <span class="side-b">5</span>
    <span class="side-b">6</span>
</div>

CSS

span {
    background: #FED;
    border: solid 1px red;
    display: block;
    width: 50px;
    height: 25px;
    text-align: center;
}

span.side-a {
    float: right;
}

span.side-b {
    float: left;
}

span:nth-child(3) {
    clear:both;
}