jQuery set height of a div to the 'dynamic height' of another

Question

I have two divs.

  <div class="col-1"><p>Content</p></div>
  <div class="col-2"><img src="" alt="" /></div>

With their respected content inside each one.

I am trying to set the height of col-2 to be exactly as that of col-1.

I tried this using jQuery:

   $(document).ready(function() {
        var divHeight = $('.col1').height(); 
        $('.col2').css('min-height', divHeight+'px');
    });

The problem is that col-1 does not have a height set on it. It has a dynamic height which grows when its content grows. Therefore the above code does not work for it.

Is there any way I can set the min height of col-2 to be equal to the dynamic height of col 1 using jQuery?

Answer 1

this works fine for me, its just that your class names are wrong, the class-names should be .col-1 and .col-2:

$(document).ready(function() {
    var divHeight = $('.col-1').height(); 
    $('.col-2').css('min-height', divHeight+'px');
});  

Here is the Fiddle

EDIT- Based on comments:
You can do all this without using jquery

1. Flexbox (not supported in IE 8 & 9) - if you apply the flex to the parent div, it will make all its children heights equal:

    .row{ display: flex;}  
   

2. table - you can give your div's the table layout

   .row {display: table; }
   
   .row div { display: table-cell;}
   

Answer 2

First of all you need to fix the class names that missed '-' in your jQuery code.

If you want to get the .col-1 height you can do it in several ways, that I will discuss later.

Before that in each case you need to write a function that gives .col-1 height and set .col-2 .

$(document).ready(function() {

    function set_heights(){
        var divHeight = $('.col-1').height(); 
        $('.col-2').css('min-height', divHeight+'px');
    }

});

Then you just call the function whenever you need...

Some of different ways are :

1. to set interval or timer to call above function once in a period of time you need.

   setInterval(function(){  set_heights(); }, 100);
   

2. use resize event for .col-1 . to call above function when ever .col-1 changed.

   $('.col-1').resize(function(){
       set_heights();
   });
   

3. use bind

remember!!! for responsive design you need too call above function even when window resized !

Good luck !