JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<div class="outer">
    <span class="inner"></span>
    <span class="gridSpan">9048.343</span>
</div>

CSS

.outer
{
    width: 70%;
    margin:20px;
    height: 30px;
    border: 1px solid gray;
    overflow: hidden;
    border-radius: 15px;
    position:relative;
    text-align: center;
}
.inner
{
    background: aqua;
    display:inline-block;
    position:absolute;
    left:0;
    width: 50%;
    height: 30px;
    
}
.gridSpan {
     display:inline-block;
     margin-top: 5px;
     color: #676767;
    position: relative;
    z-index:2;
}