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

[Anonymous]

Дано небольшое цветное поле, за которым следует тег с названием ярлыка. Вот так:


При наведении указателя мыши на небольшой цветной прямоугольник, блок должен расшириться на всю ширину, а текст метки должен расположиться внутри расширенного прямоугольника и выровняться по правому нижнему краю.

Вот так:


Я знаю, как этого добиться, обернув дополнительные элементы контейнера вокруг текущего HTML-кода, как в этом демонстрационном фрагменте. Мой вопрос: можно ли достичь желаемого результата без использования дополнительной оболочки контейнера? Мой текущий чистый HTML-код и 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;}

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

[b]YELLOW[/b]
Paragraph paragraph paragraph

[b]OLIVE[/b]
Paragraph paragraph paragraph

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