Как поместить метку в предыдущий расширенный элемент без использования контейнера-оболочки? ⇐ Html

[Anonymous]

При наличии небольшого цветного прямоугольника и тега имени метки справа от него:



При наведении указателя мыши на небольшой цветной прямоугольник он должен расшириться на всю ширину, а текст метки ЖЕЛТЫЙ должен расположиться внутри расширенного прямоугольника и выровняться по правому нижнему краю. Вот так:


Я знаю, как добиться этого, обернув дополнительные элементы контейнера вокруг текущего HTML-кода, как в этом демонстрационном фрагменте. Мой вопрос здесь направлен на достижение желаемого результата без использования дополнительной оболочки контейнера. Возможно ли это, если да, то как? Мой текущий чистый HTML-код и CSS:
HTML

Код: Выделить всё

[b]YELLOW[/b]
Paragraph paragraph paragraph

CSS

Код: Выделить всё

.box{width: 25px; height: 22px; margin-bottom: -4px;}
.box:hover {width: 100%; height: 100px; float: left;}
rect {width:100%; height:100%;}
svg + strong {position: absolute; margin: 0 0 0 5px;}

Подробнее здесь: https://stackoverflow.com/questions/798 ... sing-a-wra