Is there a way to create two equal height columns with the right column inside the left column using pure CSS? I have explored different methods, but due to the lack of a parent selector in CSS, I haven't been successful so far.
My goal is to have expandable divs where collapsing the left column hides the right column. While I had achieved this functionality with JavaScript before, I am now searching for a CSS-only solution. Placing the right column inside the left column seems like a potential workaround, as absolute positioning won't work in this scenario.
Furthermore, both columns should adjust their height based on the content of the larger column.
<div class="container">
<div class="left-column">
ssss
dddd<br/>
ffff<br/>
ddd
<div class="right-column">
fffff
</div>
</div>
</div>
.container
{
height:100%;
}
.left-column
{
background-color:blue;
width:50%;
}
.right-column
{
background-color:red;
width:100%;
position:relative;
left:100%;
}