How to stretch numbers to the width of a div?

Question

css

It seemed like a simple task, but it drove me into a stupor.
there are three inline blocks with numbers (timer), the blocks have a fixed width, let's say 30px. I'm trying to stretch the numbers to the width of the block, but without success.

<div class="hours">12</div>
<div class="minutes">56</div>
<div class="seconds">01</div>

Googled one option, but it stretches only after a space, if there is no space, then nothing stretches.
example with text
in my case there is no way to put this space between the numbers or divide, for example, hours into separate two blocks. Or is it possible somehow using js/jquery?
tell me how to proportionally stretch the numbers on the block?

Answer 1

so far with letter-spacing I have the most working option, but it doesn’t quite fit, because the timer font is a little crooked, and the number "1" has the smallest width, and because of it the second digit noticeably moves out.
that is, "18" and "08" have noticeably different widths, and in the first case the figure eight jumps to the left. if "8" were pressed to the right edge, it would not be so conspicuous.

Answer 2

use css-property letter-spacing - with it you can set the spacing between characters without using spaces.

Answer 3

Break the numbers into separate blocks (each into a separate span), and justify them with text-align: justify

Answer 4

Try to take the first character through :first-letter and set it to float:left
and then trim it with paddings or line-height
Naturally, text-align: right