How to prevent a Countdown timer to be jumpy/ pushing the number next to it using (HTML, CSS, JS only)

I am working on a project where countdown is the main focus. But when the count down starts as the numbers count down certain numbers push and pull other numbers like when eg. 22:00 changes it pulls the number on the right towards left eg. 21:59. This makes the countdown look jumpy and weird.

I want to avoid this behaviour. What I am thinking is that each number occupy a certain space and stay at its place fixed while the countdown. I don’t want to use a monospace font for visual reasons.


...
    <div id="timer-container">
      ...
      <div id="time-left">25:00</div>
    </div>
...
timer-container {
  position: relative;
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 50px;
  transition: border-color 0.2s ease-in-out;
  overflow: hidden;
  max-height: 180px;
  padding: 0px 20px;
}

#timer-container:hover {
  border-color: black;
}

#time-left {
  font-family: "Karla", sans-serif;
  font-size: 10.375rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: -5px;
  user-select: none;
  position: relative;
  z-index: 1;
  opacity: 1;
}
let timeLeft = 25 * 60; // seconds
const timeLeftEl = document.getElementById('time-left');

// ...

// Function to update the time left text content
function updateTimeLeftTextContent() {
  const minutes = Math.floor(timeLeft / 60);
  const seconds = timeLeft % 60;
  timeLeftEl.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

I am quite new to pure HTML, CSS, Javascript. So a breif explaination on this is possible is much appriciated.

I have tried to separate the timer into individual span tags ’00’, ‘:’, ’00’ then tried to make block of fixed size but it just made it more werid. I also tired ch for the timer-container and the time-left but it didnt work.

I want the timer to stay in one place like monospace characters but the text is not monospace font, that what I want to solve