<ul class='countdown'>
  <li class='days'></li>
  <li class='hours'></li>
  <li class='minutes'></li>
  <li class='seconds'></li>
</ul>

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@1&display=swap');

.countdown {
  width: 300px;
  display: flex;
  flex-direction: row;
  list-style: none;
  justify-content: space-between;
  padding: 0;
}

.countdown li {
  font-family: 'Roboto Mono', monospace;
  font-size: 1.2rem;
  display: flex;
  height: 40px;
  width: 60px;
  align-items: center;
  justify-content: center;
  border: 1px solid teal;
  border-radius: 15%;
}

const padZeros = (pad, num) => (String(num).padStart(pad, '0'))

const days = 98
const hours = 22
const minutes = 9
const seconds = 5

// [time, padding]
const times = [
  [days, 3], 
  [hours], 
  [minutes], 
  [seconds]
]

document
    .querySelectorAll('.countdown li')
    .forEach((timeSpan, i) => {
      const [currTime, padding = 2] = times[i]
      timeSpan.textContent = padZeros(padding, currTime)
    })