JSFiddle - React, Tailwind, and code Playground

HTML

<div class="time">&nbsp;
        <div class="leftnum">0</div>
        <div class="rightnum">5</div>
        <div class="progress">50%</div>
</div>

CSS

.time {
                        border: solid 1px #000000;
                        width: 250px;
                        position: relative;
                }
                
                .leftnum, .rightnum,.progress {
                        position: absolute;
                        height: 100%;
                        top: 0;
                }
                
                .rightnum {
                        right: 0;
                        background: #ffffff;
                }
                
                .leftnum {
                        left: 0;
                        width: 50%;
                        background: #555555;
                }
                
                .progress {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        text-align: center;
                }