Adding text in this CSS/progress bar area

I've created a rudimentary progress bar using Javascript. I've basically done this:
HTML:

    <div class="progress-bar">
        <div id="heat_power" class="heat_progress"></div>
    </div>
    <center>Heat: <label id='heat_text'>0</label>%</center>
    <br>
    <div class="progress-bar">
        <div id="cool_power" class="cool_progress"></div>
    </div>
    <center>Cool: <label id='cool_text'>0</label>%</center>

CSS:

.progress-bar {
  height: 20px;
  background-color: #ddd;
  border-radius: 10px;
}

.progress {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(to right, #ffbf00 0%, #ff007f 100%);
  width: 0%;
}

I update the ".progress" bar with data that comes over an SSE.

I would like to add the text to the progress bar of the literal value.
Unfortunately, I tried doing this with the ".progress" class, but because it's actually a dynamically changing width it does not look good.

So, I tried to add it to the ".progress-bar" class and while the text was added I could not see the ".progress" class. (Like it was layered under the text)

I am currently putting the text underneath like so:

But I would much prefer to put the text inside the bar.
Any tips on how to do this?

Just use position:absolute

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.progress-bar {
  height: 20px;
  background-color: #ddd;
  border-radius: 10px;
  position:relative;
}

.progress {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(to right, #ffbf00 0%, #ff007f 100%);
  width: 0%;
  position:relative;
}
.progress-bar center {
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}

<!-- language: lang-html -->

<div class="progress-bar">
        <div id="heat_power" class="progress" style="width:30%"></div>
        <center>Heat: <label id='heat_text'>30</label>%</center>
    </div>
    
    or 
    
    <div class="progress-bar">
        <div id="heat_power" class="progress" style="width:30%"> <center>Heat: <label id='heat_text'>30</label>%</center></div>
       
    </div>

<!-- end snippet -->

If you can change the HTML, you can add the "label" within the progress bar div. Then give the progress bar a position of relative. Then absolutely position the label within it.

I also made some random updates. Like I gave the progress bar a generic progress class that you can apply the general CSS to then use a CSS selector to just change the heat specific part. And got rid of center and used CSS text align center.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let heat_progress = document.querySelector(".heat_progress")
let percent = 0;

function updateProgress(){
    if(percent < 100){
        percent += 10;
        
        heat_progress.querySelector(".progress").style.width = percent + "%"
        heat_progress.querySelector("label").textContent = percent + "%"
        
        setTimeout(updateProgress,1000)
    }
}

setTimeout(updateProgress,1000)

<!-- language: lang-css -->

.progress-bar {
  height: 20px;
  background-color: #ddd;
  border-radius: 10px;
  position:relative
}

.progress {
  height: 100%;
  border-radius: 10px;
  width: 0%;
}

.heat_progress .progress{
  background: linear-gradient(to right, #ffbf00 0%, #ff007f 100%);
 }

.progress-bar .label{
  position:absolute;
  width:100%;
  top:2px;
  text-align:center;
}

<!-- language: lang-html -->

<div class="progress-bar heat_progress">
  <div class="label">Heat: <label>0</label></div>
  <div class="progress"></div>
</div>

<!-- end snippet -->

Also you can use css variable:

https://codesandbox.io/s/beautiful-bouman-5mo3v2