JSFiddle - React, Tailwind, and code Playground

HTML

<!-- example 1 -->
 <div class="outer-container">
   <div class="progress-bar-container">
     <div style="width: 45%">
       <span class="progress-bar-text">45%</span>
     </div>
   </div>
   <div class="progress-bar-container bg-grey">
     <div class="bg-blue progress-bar ghost" style="width: 75%;">
     </div>
     <!-- variable width is above ~5% -->
     <div class="bg-blue progress-bar" style="width: 45%">
     </div>
   </div>
 </div>

 <!-- example 2 -->
 <div class="outer-container">
   <div class="progress-bar-container">
     <div style="width: 1%">
       <span class="caption-1 progress-bar-text">1%</span>
     </div>
   </div>
   <div class="progress-bar-container bg-grey">
     <div class="bg-blue progress-bar ghost" style="width: 45%">
     </div>
     <!-- variable width is below ~5% -->
     <div class="bg-blue progress-bar" style="width: 1%">
     </div>
   </div>
 </div>

 <!-- example 3 -->
 <div class="outer-container">
   <div class="progress-bar-container">
     <div style="width: 3%">
       <span class="caption-1 progress-bar-text">3%</span>
     </div>
   </div>
   <div class="progress-bar-container bg-grey">
     <div class="bg-blue progress-bar ghost" style="width: 45%">
     </div>
     <!-- variable width is below ~5% -->
     <div class="bg-blue progress-bar" style="width: 3%">
     </div>
   </div>
 </div>

CSS

.progress-bar {
  position: absolute;
  width: 0px;
  height: 17px;
  border: 0px solid white;
  /* border-radius issue */
  border-radius: 8px;
}

.progress-bar-container {
  position: relative;
  width: 200px;
  height: 17px;
  border: 0px solid white;
  /* border-radius issue */
  border-radius: 8px;
  text-align: right;
}

/* some helper classes */

.ghost {
  opacity: 0.15;
}

.progress-percent {
  margin-bottom: 4px;
}

.progress-bar-text {
  opacity: 0;
  font-size: 12px;
}

.outer-container:hover>.progress-bar-container .progress-bar-text {
  opacity: 1;
}

.bg-blue {
  background: #0096FF;
}

.bg-grey {
  background: #E8E8E8;
}

.outer-container {
  margin-top: 16px
}