Как предотвратить скачок таймера обратного отсчета/нажатие числа рядом с ним с помощью (только HTML, CSS, JS) ⇐ CSS

[Anonymous]

Я работаю над проектом, в котором основной упор делается на обратный отсчет. Но когда начинается обратный отсчет, когда числа отсчитываются, определенные числа толкают и тянут другие числа, например, когда. 22:00 изменяется, число справа перемещается влево, например. 21:59. Из-за этого обратный отсчет выглядит нервным и странным.
Я хочу избежать такого поведения. Я имею в виду, что каждое число занимает определенное место и остается на своем месте во время обратного отсчета. Я не хочу использовать моноширинный шрифт по визуальным соображениям.

Код: Выделить всё

...

...
25:00

...

Код: Выделить всё

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')}`;
}

Я новичок в чистом HTML, CSS и Javascript. Поэтому краткое объяснение этого возможно очень полезно.
Я попытался разделить таймер на отдельные теги диапазона «00», «:», «00», а затем пытался сделать блок фиксированного размера, но это сделало его еще более странным. Я также утомил ch для контейнера таймера и оставшегося времени, но это не сработало.
Я хочу, чтобы таймер оставался в одном месте, как моноширинные символы, но текст не моноширинный шрифт, вот что я хочу решить

Подробнее здесь: https://stackoverflow.com/questions/792 ... to-it-usin