Same height for all .list-group-item

by Ash Lowell

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="row">
    <div class="col-md-4">
        
        <div class="list-group">
           
<a href="#" class="list-group-item">
<div class="list-group-item-wrapper"> 
                <h4 class="list-group-item-heading">heading</h4>
                <p class="list-group-item-text">Donec id elit non mi porta gravida.</p> </div>
            </a>
           
           
            <a href="#" class="list-group-item">
                 <div class="list-group-item-wrapper">
                <h4 class="list-group-item-heading">heading</h4>
                <p class="list-group-item-text">Donec id elit non mi porta gravida.</p></div>
            </a>
                
                
            <a href="#" class="list-group-item">
                <div class="list-group-item-wrapper">
                <h4 class="list-group-item-heading">List group item heading</h4>
                <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                     </div>
            </a>
                   
        </div>
    </div>   
</div>

CSS

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

JavaScript

var temp = 0;
$('.list-group .list-group-item-wrapper').each(function (index) {
  if($(this).outerHeight() > temp)
  {
    temp = $(this).outerHeight();
  }          
 });
$('.list-group .list-group-item-wrapper').css('min-height',temp);


$(window).resize(function(){
    var temp = 0;
$('.list-group .list-group-item-wrapper').each(function (index) {
  if($(this).outerHeight() > temp)
  {
    temp = $(this).outerHeight();
  }          
 });
$('.list-group .list-group-item-wrapper').css('min-height',temp);
});