Make child div equal on a row using jquery

Question

I need to make the childs div equal to each other how matter long it is together with the column. I only have one row then the rest will be a columns out of bootstrap.

This is the fiddle I have created

http://jsfiddle.net/Qr48S/60/

I already making it equal but my problem is that the script is getting the highest div and applying it to the other columns which making the other columns having a big white space whenever it has not that long content. What I need is getting it per row though I'm not declaring more than one row.

Button also needs at the bottom of the column

It looks like this

<div class="container">
  <div class="row">
    <div class="item-container col-lg-4 col-md-4 col-sm-4">
      <div class="image"><img class="img-responsive"  
      src="http://placehold.it/350x150"></div>
      <div class="item-title"> 
         title title title title title title title 
         title title title title title title title title title 
      </div>
      <div class="item-details"> 
        <p>details 1</p>
        <p>details 2</p>
        <p>details 3</p>
        <p>details 4</p>
      </div>
      <div class="item-button"> 
         <button type="button" class="btn btn-primary">Add to cart</button> 
      </div>
      </div>

      <div class="item-container col-lg-4 col-md-4 col-sm-4">
      <div class="image"><img class="img-responsive"  
      src="http://placehold.it/350x150"></div>
      <div class="item-title"> 
         title title title title title title title 
         title title title title title title title title title
         title title title title title title title 
         title title title title title title title title title 
      </div>
      <div class="item-details"> 
        <p>details 1</p>
        <p>details 2</p>
        <p>details 3</p>
        <p>details 4</p>
        <p>details 1</p>
        <p>details 2</p>
        <p>details 3</p>
        <p>details 4</p>
      </div>
      <div class="item-button"> 
         <button type="button" class="btn btn-primary">Add to cart</button> 
      </div>
      </div>
   </div> 
</div>

Answer 1

My recommendation would be to use the match height plugin

I've pasted it into this fork of your jsfiddle

http://jsfiddle.net/n2e4wg76/

You can then see that it would make it simpler. Of course instead of pasting the whole js file you would include the js file from https://github.com/liabru/jquery-match-height

then just use

$(document).ready(function() {

    $('.item-container').matchHeight();

});