Given a small colored box followed by a label name tag to it. Like so:
Once mouse hovering the small colored box, the box should expand to full width and the label text should get positioned inside the now expanded rectangle and be aligned to the bottom right.
Like so:
I know how to achieve this by wrapping an extra container elements around the current html, like this demo snippet. My question here is: is it possible to achieve my desired result Without using an extra container wrapper? My current bare clean html code and css are:
.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;}<svg class="box"><rect style="fill: yellow"/></svg><strong>YELLOW</strong><p>Paragraph paragraph paragraph</p><svg class="box"><rect style="fill: olive"/></svg><strong>OLIVE</strong><p>Paragraph paragraph paragraph</p>