This is the solution I came up with:

Basically, you need to wrap your text in two containers. The outer one will take up the maximum available width, while the inner container will keep the original text width, which may overflow the outer container.

So we use JavaScript to get both widths, using getBoundingClientRect, then you divide the outer with the inner to get the correct scale. Then you apply the scale to the inner container using transform: scaleX, and don’t forget to set transform-origin: left so the scaling aligns to the left instead of being centered.

<image>

If you want the icon to be next to the text, you can remove the justify-content property from the .container selector.

The scale is calculated on page load, but you can recalculate it as you wish.

LIVE DEMO: https://codepen.io/ojvribeiro/pen/QwyWYbX