JSFiddle - React, Tailwind, and code Playground

HTML

<div id="barsCon">
    <div class="bar">
        <div class="barEmpty">
            <div class="barFiller" style="width:30%"></div>
            <span>3 / 10</span>
        </div>            
    </div>
    <div class="bar">
        <div class="barEmpty">
            <div class="barFiller" style="width:30%"></div>
            <span>3 / 10</span>
        </div>            
    </div>
</div>

CSS

.bar {
    width:300px;
    margin:3px auto;
    overflow: hidden;
}
.barEmpty {
    background: red;
    height:14px;
    position: relative;
}
.barEmpty span {
    position:absolute;
    left:130px;
    top:0;
    font-size:12px;
}
.barFiller {
    background: blue;
    height: 14px;
}