How to fit arbitrary content into a proportional block (square) using “pure” CSS?

Question

css

Hello colleagues.
Task: fit arbitrary content into the container (green square) so that the container remains a square (size proportions are preserved), and the text would always be inside it. (i.e. somehow you need to size the left bar, based on the size of the content - I'll never know ...)
It is necessary on "pure" CSS.
Here is the link: https://jsfiddle.net/dmuhdbxj/3/
Thank you in advance, everyone!

Answer 1

It can be done, but only this arbitrary content will be in one line, since the width of the square is not fixed, and accordingly the content will not wrap on a new line until it is ordered to do so with the BR tag