Resizable containers at the same level - css

Question

<div class="row container-row">
<div class="col-md-8 col-xs-12 no-padding-column">
<div class="video-container">
<img class="video-image" src="image.jpg">
<a href="#" class="js-play-video">
<img class="play-image" src="play.png">
</a>
</div>
</div>
<div class="col-md-4 col-xs-12 no-padding-column">
<div class="text-content">
<h1>Superious Quality</h1>
<p>sometext</p>
</div>
</div>
</div>
Below is my Style
.panel-container {
color: #fff;
height: auto;
position: relative;
margin: 0px auto;
}
.panel-container .container-row {
margin: 5%;
}
.panel-container .container-row .no-padding-column {
padding-right: 0px;
padding-left: 0px;
}
.panel-container .video-container {
display: block;
position: relative;
}
.panel-container .video-container .video-image {
width: 100%;
}
.panel-container .play-image {
position: absolute;
width: 13%;
height: auto;
top: 50%;
left: 57%;
margin-left: -12%;
margin-top: -6%;
}
.panel-container .text-content {
padding-left: 15px;
padding-right: 15px;
float: left;
height: 381px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
}
#media (max-width: 30em) {
.panel-container .text-content {
height: auto;
}
}
.panel-container .text-content h1 {
color: #fff;
}
I want the text-content has the same height as the video-container. Please note that the height of video-container is not fixed and defined by the size of image and it's resizing when the browser resize. How can I make the text-content resizable to always be aligned (height) with the video-container?

Answer 1

One solution would be to make the .container-row and the .text-content the same background-color. The code:
.panel-container {
color: #fff;
margin: 0px auto;
}
.panel-container .container-row {
background: #666666;
margin: 5%;
}
.panel-container .container-row .no-padding-column {
padding-right: 0px;
padding-left: 0px;
}
.panel-container .video-container .video-image {
width: 100%;
}
.panel-container .play-image {
position: absolute;
width: 13%;
height: auto;
top: 50%;
left: 57%;
margin-left: -12%;
margin-top: -6%;
}
.panel-container .text-content {
padding: 0 15px;
float: left;
color: #fff;
}
.panel-container .text-content h1 {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid panel-container">
<div class="row container-row">
<div class="col-xs-8 no-padding-column">
<div class="video-container">
<img class="video-image" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<a href="#" class="js-play-video">
<img class="play-image" src="http://uxrepo.com/static/icon-sets/iconic/svg/play-circle2.svg" />
</a>
</div>
</div>
<div class="col-xs-4 no-padding-column">
<div class="text-content">
<h1>Superious Quality</h1>
<p>sometext</p>
</div>
</div>
</div>
</div>
I know it is not the right way to do it and that it doesn't answer the question, but it works on behaviour.

Answer 2

I actually used the Reflex on a link but it's not used extensively. I'm not sure if it's a right thing to use to get the site to production. Please let me know if there is any better option.

Answer 3

To adjust both divs at the same height, all I did was adding
float: left;
to the css class .no-padding-column
.panel-container .container-row .no-padding-column {
padding-right: 0px;
padding-left: 0px;
float: left;
}
I tried to reproduce your situation in a fiddle. Notice that I removed the .panel-container class, since it's not in your code. I am not sure where this class is, it might cause problems as well, let me know if my Fiddle works as exspected. And if there's still a problem, could you add your .panel-container class as well? (And maybe images from the internet and not local ones? That would make it much easier for us)
For those who want to adjust the height of the second div, depending on the change of the first div:
For this you could use the JS framework "attrchange". Add the JS file to your page and use the following code.
$(".video-container").attrchange({
trackValues: true, // set to true so that the event object is updated with old & new values
callback: function(event) {
if(event.attributeName == "height") { // which attribute you want to watch for changes
$(".text-content").css('height', event.newValue);
}
}
});

Answer 4

I post the solution I found you might be interested as well.
Here is codepen link!
<div class="table-wrapper">
<div class="table-row">
<div class="table-column short-column">
<div class="content-container">
<p>Short Column</p>
</div>
<div class="button-row">
<button>Click Me</button>
</div>
</div>
<div class="table-column medium-column">
<div class="content-container">
<p>Medium Column</p>
<p>Medium Column</p>
<p>Medium Column</p>
</div>
<div class="button-row">
<button>Click Me</button>
</div>
</div>
<div class="table-column long-column">
<div class="content-container">
<p>Long Column</p>
<p>Long Column</p>
<p>Long Column</p>
<p>Long Column</p>
<p>Long Column</p>
<p>Long Column</p>
<p>Long Column</p>
</div>
<div class="button-row">
<button>Click Me</button>
</div>
</div>