equal height boxes

by Roshan Karunarathna

HTML

<div class="box">
  <h2>Callers Waiting</h2>0
</div>
<div class="box">
  <h2>Average Hold Time</h2>00:00:18
</div>
<div class="box">
  <h2>Longest Wait Time</h2>00:00:46
</div>
<div class="box">
  <h2>Shortest Wait Time</h2>00:00:05
</div>
<div class="box">
  <h2>Total Talk Time</h2>00:17:53
</div>
<div class="box">
  <h2>Total Calls</h2>7
</div>
<div class="box">
  <h2>Answered Calls</h2>5
</div>
<div class="box">
  <h2>Abandoned Calls</h2>1
</div>
<div class="box">
  <h2>Calls Ended By Agent</h2>6
</div>
<div class="box">
  <h2>Calls Ended By Caller</h2>1
</div>
<div class="box">
  <h2>Average Ticket Reponse Time</h2>00:00:00
</div>
<div class="box">
  <h2>Unreturned Phone Calls</h2>3
</div>
<div class="box">
  <h2>Open Tickets</h2>0
</div>
<div class="box">
  <h2>Completed Tickets</h2>2
</div>

CSS

html,
body {
  font-family: arial;
}

.container {
  text-align: center;
}

.box {
  width: 350px;
  display: inline-block;
  margin: 10px 20px 0 auto;
  padding: 10px;
  border: 1px solid black;
  min-height: 60px;
  font-size: 30px;
  text-align: center;
  vertical-align: top;
}

.box h2 {
  font-size: 30px;
  text-align: center;
}

JavaScript

$(function() {
    $.fn.setAllToMaxHeight = function(){
       // console.log('p');
      return this.height(
        Math.max.apply(this, $.map(this, function(e) { return $(e).height() }) )
      )
    }
    
    $('div.box').setAllToMaxHeight();
    //setTimeout("$('div.box').setAllToMaxHeight();", 10);
});