How to make the text not get out of the block?

Question

css

I know that similar questions have already been asked and there are solutions to them, but I have such a case:

If you reduce the width, then the numbers crawl out of the block.
overflow: hidden; and line breaks are not suitable. My option is to reduce the size of the text, but how to do this regardless of the number of characters in the line? That is, without reference to media , or how is it done?
(an example can be seen if you switch the codepen to mobile display in devtools and reduce the resolution. Everything is reduced in size there.)

Answer 1

How to change font size depending on screen size?

Answer 2

https://codepen.io/bootd/pen/bJzeYX +- customize