How to force the width of the content of an element (and not the element itself)?

I would like to have two squares with a number in each, centered. The number may be one or two digits, and I would like the centering to be done on the basis of two digits, even for the case where there is just one (this is going to be a clock for my home dashboard, sometimes the hour will be 8 and sometimes 14).

The code below shows a draft of the final effect, both numbers are centered but I do not know how to force 1 to be of the width of two digits. I am not aiming for perfection (digits are generally of different widths), but rather to say something along the lines of <span class="el" width_of_text_for_this_element="2em;">1</span> (this is of course pseudo-code)

.clock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  align-items: center;
  width: 400px;
}

.el {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  font-size: 120px;
  background-color: black;
  color: white;
  font-family: sans-serif;
  font-weight: bolder;
}

<div class="clock"><span class="el">1</span><span class="el">18</span></div>

I believe that what I am looking for is a way to apply a style to the content of an element (and not the element itself), but I am not sure.