How To Make Height Of Two Div Equal Respective To Each Other?

Question

Here I have two bootstrap panel inside class row.
And I am trying to make the height both the panel equal respective to each other even if any amount of data in placed insid

Answer 1

It's better to use matchHeight.js in this scenario.

You are able to match any component you want.

I have matched panel-body as that's what's increasing when you add content to it. Here's a pen as well.

NOTE: As the size shrinks, this property will not be applied. Though according to me it will be unnecessary scrolling if the property is still existing. As the user will have to scroll all the blank spaces.

$(function() {
  $('.panel-body').matchHeight();
});

  

    

      
Panel Heading
      
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      
Panel Footer
    
  

  

    

      
Panel Heading
      

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit
        amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      
      
Panel Footer