I am encountering some issues with nested 'div' elements. Within a parent div, I have two child 'div's.
<div class="case-study-video-container">
<div class="video-holder">
<?php putRevSlider( '' ); ?>
</div>
<div class="content-holder">
<div class="video-text-container">
<h3>..</h3>
</div>
</div>
</div>
https://i.sstatic.net/VCq2v.png
The issue lies in the fact that the content text div within 'case-study-video-container' is not adjusting its height properly to match the video div. The text div seems to either be too large or too small compared to the video. Can anyone provide a solution to ensure that the height of the text div always matches the height of the video div?
Here is the CSS code I am using:
.video-holder{
height: 100% !important;
width: 50%;
display: inline-block;
float: left;
overflow: hidden;
}
.content-holder {
width: 50%;
display: inline-block;
float: left;
overflow: hidden;
}
.video-text-container {
height: auto;
padding: 100px 30px;
}
Thank you!