JSFiddle - React, Tailwind, and code Playground

HTML

<h1>JavaScript Progress Bar</h1>

        Combo:<p id="ComboCount"></p>
        <p id="ClockDisplay"></p>

        <div id="myProgress">
          <div id="myBar"></div>
          <div id="BarTwo"></div>
        </div>

        <div id="MyTime">
          <div id="TimeBar"></div>
        </div>

        <br>
        <button onclick="test()">Test</button>

CSS

#MyTime {
  margin-top: 10px;
  position: realtive;
  width: 100%;
  background-color: #d0d0d0;
}

#TimeBar {
  top: 0;
  width: 0%;
  height: 5px;
  background-color: #ff8800;
}

#myProgress {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  /*grid to stack both bars*/
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  position: realtive;
  width: 100%;
  background-color: #ddd;
}

#myBar {
  grid-area: 1/1/2/2;
  /*red live bar*/
  top: 0;
  width: 0%;
  height: 30px;
  background-color: #ff0000;
}

#BarTwo {
  grid-area: 1/1/2/2;
  /*green reset update bar*/
  margin-top: 0;
  top: 0;
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
}

JavaScript

var Clock = 300;
var Combo = 0;
var width = 0;
var elem = document.getElementById("myBar"); //setting numbers on first start
var elemtwo = document.getElementById("BarTwo");
var elemtime = document.getElementById("TimeBar");
document.getElementById("ClockDisplay").innerHTML = Clock;
document.getElementById("ComboCount").innerHTML = Combo;

function UpdateDisplay() {
  document.getElementById("ComboCount").innerHTML = Combo;
  elem.style.width = width / 100 + "%";
}

setInterval(countdown, 20); //10 seconds timer that refreshes the combo

function countdown() {
  if (Clock > 0) {
    Clock--;
    document.getElementById("ClockDisplay").innerHTML = Clock;
    elemtime.style.width = Clock / 3 + "%";
  } else {
    Combo = 0;
    document.getElementById("ClockDisplay").innerHTML = Clock;
    document.getElementById("ComboCount").innerHTML = Combo;
    for (let i = 1; i <= width / 100; i++) {
      elemtwo.style.width = i + "%";
    }
  }
}

function test() {
  if (width >= 10000) {
    Combo = 0;
    width = 0;
    document.getElementById("ComboCount").innerHTML = Combo;
  } else {
    Clock = 300; //resetting clock, adding to the combo, dealing damage, update numbers
    Combo += 2;
    width += 2 * Combo;
    UpdateDisplay();
  }
}