JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="item left">1</div>
    <div class="item left">2</div>
    <div class="item left">3</div>
    <div class="item left">4</div>
    <div class="item active">5</div>
    <div class="item right">6</div>
    <div class="item right">7</div>
    <div class="item right">8</div>
    <div class="item right">9</div>
    <div class="item right">10</div>
</div>

CSS

.row {
    height: 150px;
    background: blue;
}

.item {
    display: inline-block;
    padding: 2.5px;
    color: white;
    width: 20px;
    height: 100%;
    background: red;
    margin: 0 1px;
    box-sizing: border-box;
}
   
.item.left {
    float: left;
}

.item.right {
    float: right;
}

.item.active {
    color: black;
    width: 100px;
    background: yellow;
    float: none;
}