I am facing an issue that needs a solution. I need to ensure that two div elements have the same height. The left div should have 'auto' height while the right one must match it. Moreover, the right div contains 14 nested divs that need to be scrollable.
Below is the code snippet:
#episodenbox {
margin-top: 62px;
width: 960px;
margin-left: auto;
margin-right: auto;
height: auto;
}
#titelbox {
width: 960px;
height: 50px;
background-color: #ffffff;
}
...
<div id="left">
<div id="titelbox">
<p>Episode 01: Encounter</p>
</div>
<div id="thumbnail">
<img id="episodenimg" src="Episode%2001.png">
<p>A mutant shaped as a young girl breaks out of an underground research lab, killing 23 security guards in the process. Teenagers Yuka and Kohta encounter the mutant on the beach, who seems to have lost its memory due to a gunshot wound.</p>
</div>
</div>
<div id="right">
<div id="untertitelbox">
<p>Other Episodes:</p>
</div>
<div id="episodenbox1">
<a href="Episode%2002.html"><div id="episode2">
<img src="Episode%2002.png">
<p>Episode 02: Annihilation</p>
</div></a>
...
</div>
</div>