CSS how to keep span element fixed in progresbar - html

Question

I am using the following CSS to display a progresbar and in it I display the time that is left. For some reason no matter what I try the displayed time wont stay at its place and is moving left as the proress bar width is decreasing. I have tried a lot of ways to keep the text from moving and keep it centered but none seems to work. Please help !
CSS:
.progress {
background: rgba(255,255,255,0.1);
justify-content: flex-start;
border-radius: 100px;
align-items: center;
position: relative;
padding: 0 5px;
display: flex;
height: 20px;
width: 300px;
}
.progress-value {
box-shadow: 0 10px 40px -10px #fff;
border-radius: 100px;
background: red;
height: 15px;
}
The div ( the div with the ID timer needs to be in the middle of the progres bar and it should not move while the progres bar is degreasing !)
<div class="progress">
<div id='progress' class="progress-value"><span id='timer' style="display: inline; width: 300px !important;"></span></div></center></div></center>

Answer 1

I solved this by wrapping the progress bar and the time element in another div, position relative, then I can absolutely position the time element in any position; in this case I centered it in the div.
The time stays put because it's out of the flow of the document but it's div takes up the same space as the progress bar.
.progress {
background: rgba(5,5,5,0.5);
justify-content: flex-start;
border-radius: 100px;
align-items: center;
padding: 0 5px;
display: flex;
height: 20px;
width: 100%;
}
.progress-value {
box-shadow: 0 10px 40px -10px #fff;
border-radius: 100px;
background: red;
height: 15px;
width: 35%;
}
.progress-and-timer {
position: relative;
}
.timer-value {
position: absolute;
text-align: center;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 20px;
color: white;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
}
<div class="progress-and-timer">
<div id="timer" class="timer-value">time</div>
<div class="progress">
<div id="progress" class="progress-value">
</div>
</div>
</div>