How can I make an HTML element’s text be shown at the largest font size which will not lead to overflow?

I have an HTML document with three elements. The first and third contain a fixed amount of text at fixed sizes.

The middle element, however, can vary widely in text length between loads of the page. I want to style it so that its font size is set to the largest one that will not result in the document overflowing the viewport.

A CSS-only solution would be ideal, but JavaScript is okay if needed.

I don’t really know where to start, so I don’t have any code. A previous, similar question doesn’t cover my case, because the answers just use media queries to set different font sizes for different screen sizes.

I asked ChatGPT, and it gave me a nonsensical answer that suggested setting the font size to 10vh.