Как вписать в пропорциональный блок (квадрат) произвольное содержимое на «чистом» CSS?

Question

[xmoonlight]

Приветствую, коллеги.
Задачка: вписать в контейнер (зелёный квадрат) произвольный контент так, чтобы контейнер оставался квадратом (пропорции размеров сохранялись), а текст всегда был бы внутри него. (т.е. как-то надо левый бар сайзить, исходя из размеров контента - ума не приложу...)
Нужно на "чистом" CSS.
Вот линк: https://jsfiddle.net/dmuhdbxj/3/
Заранее, всем Огромное Спасибо!

Answer 1

[Алексей Струков]

Можно сделать, но только этот произвольный контент будет в одну строку, так как ширина квадрата не фиксированная, и соответственно контент не будет заворачиваться на новую строку, пока ему не приказать это сделать тегом BR

Comments

[xmoonlight]

Мне хотя бы в одну для начала... А эту одну строку нельзя будет сделать с адаптивной высотой строки и holder(DIV) в неё поместить?

[Алексей Струков]

xmoonlight: адаптивная высота, всмысле резиновая?
Увеличивается квадрат и увеличивается шрифт?
С дивом проблемa

[xmoonlight]

Алексей Струков: нет, шрифт - тот же, а строка содержит div с height:100%
(это всё домыслы и предположения мои...)
А с одной строкой - покажите как?

[Алексей Струков]

xmoonlight: https://jsfiddle.net/03nnpfoe/
с дивами не получилось у меня с первого раза. Надо думать как их туда засунуть.

[xmoonlight]

Алексей Струков: продолжаю изыскания.... Спасибо!