Is there a way to have two divs per row, where the second div always displays its full content and the height of the first div matches the height of the second div? If the content in the first div exceeds the height, it should be scrollable. I've attempted to set the height using javascript but it seems inefficient as the content can change. Is there a CSS solution for this effect?
Here is my code snippet:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<style>
.firstElementClass, .secondElementClass{
float:left;
width: 30%;
text-align: center;
}
.firstElementClass{
background: red;
overflow: auto;
}
.secondElementClass{
background: yellow;
}
.rowClass{
margin-top: 20px;
clear:both;
padding: 20px;
}
</style>
</head>
<body>
<div class="rowClass">
<div class="firstElementClass">11aa<br>11aa<br>11aa<br>11aa<br>11aa<br>11aa</div>
<div class="secondElementClass">11bb<br>11bb<br>11bb<br>11bb</div>
</div>
<div class="rowClass">
<div class="firstElementClass">AA</div>
<div class="secondElementClass">22bb<br>22bb<br></div>
</div>
<div class="rowClass">
<div class="firstElementClass">AA</div>
<div class="secondElementClass">33bb<br>33bb<br>33bb<br>33bb</div>
</div>
<div class="rowClass">
<div class="firstElementClass">AA</div>
<div class="secondElementClass">44bb<br>44bb<br>44bb</div>
</div>
</body>
<script>
$(function(){
$(".firstElementClass").each(function(){
$(this).height($($(this).parent().find(".secondElementClass")[0]).height());
});
});
</script>
</html>