Here is the structure of the HTML:
<div id="container">
<div id="blue-box">
</div>
<div id="red-box">
</div>
</div>
The CSS styling for these elements is as follows:
#container {
background-color:blue;
text-align:center;
margin:0 auto;
width:60%;
padding:20px;
position:relative;
}
#blue-box {
background-color:green;
width:40%;
display:inline-block;
vertical-align:top;
height:100%;
}
#red-box {
background-color:red;
width:40%;
display:inline-block;
vertical-align:top;
height:100%;
}
Is there a way to match the height of "blue-box" to the height of "red-box" without using JavaScript? I have tried setting the container's height to auto, but it doesn't seem to work.
I would prefer to find a solution without relying on JavaScript.
You can view the Codepen example here.