JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Progress with fixed width:</h1>
<div class="progress" style="width: 400px;">
 <div class="progressValue" style="width: 50%">
  <div class="progressInnerLabel" style="width: 400px;">I'm a progress text</div>
 </div>
 <div class="progressLabel">I'm a progress text</div>
</div>
<br />
<h1>How to get this running (automatic width)?</h1>
<div class="progress">
 <div class="progressValue" style="width: 50%">
  <div class="progressInnerLabel" style="width: 100%;">I'm a progress text</div>
 </div>
 <div class="progressLabel">I'm a progress text</div>
</div>

CSS

.progress {
    position: relative;
}

.progressValue {
    overflow: hidden;
    position: absolute;
    height: 20px;
    background-color: blue;    
}

.progressInnerLabel {
    position: absolute;
    text-align: center; 
    color: white;  
    height: 20px;    
}

.progressLabel {
    background-color: #eee; 
    text-align: center; 
    color: black;    
}