matchHeight jquery for nested columns

matchHeight jquery for nested columns

Hi,

I am use the matchHeight jquery plugin to create equal size columns. It worked great until I nested two columns within one of the columns that needs to be equal height. I am stuck on what I need to change to make it work with the nested columns.


Here is my html:

<div class="gridrow-a">
    
<div class="column w4">
   
<h3 class="yellow">YOUR GUIDED JOURNEY</h3>
<div class="box">

<h4>A Personal &amp; Peaceful Journey</h4>
<p>&ldquo;"When it comes time to die, be not like those whose hearts are filled with the fear of death, so       when their time comes they weep and pray for a little more time to live their lives over again in a different       way. Sing your death song, and die like a hero going home."</p>
<p>&mdash;Aupumut, Mohican.</p>
        </div>

    </div>
    
<div class="column w10">
<h3 class="yellow">LOVE STORIES</h3>

<div class="box">
    
 <div class="column w11">
<h4>A Loving End-of-Life Plan</h4>
<p>When we come into the world we enter with our loving family planning and creating a birth plan for our             arrival. When we leave this world we can exit with the same loving care and planning, creating a             death plan for our departure.</p>
<p>I guide, educate, and empower others to be prepared and authentically present, during times of your       greatest joys and your deepest sadness's in life.</p>
</div>

    <div class="column w11">
<h4>Uniting Soul Mates</h4>
<p>Uniting Soul Mates is my mission. 
      Joining couples that have been through unique journeys and lifetimes of experience to find each other.            The depth and commitment of your love expressed is the most important part of your wedding       ceremony. Together we create with your  story, in your own language, with our own sentiment, a moment       in time that will be held in your hearts forever.</p>
 <p>I speak from the heart.<br>
      I listen from the heart.<br>
      I co-create ceremony & ritual from the heart.</p>
</div>
    
</div>
</div>

Here is my css:

.gridrow-a { width: 100%; margin: 30px 0; }
.gridrow-a:after { content: " "; display: block; overflow: hidden; clear: both; height: 0; }
.gridrow-a:first-child { margin-top: 0; }
.crumbs-a + .gridrow-a { margin-bottom: 0; }
.gridrow-a.sep { margin: 0 0 40px; padding: 0 0 40px; border-bottom: 3px solid #d3d2cf; }
.gridrow-a .column { margin: 0 0 0 4.4%; float: left; min-height: 1px; position: relative; }
.gridrow-a .column + .column:last-child { float: right; margin-left: 0; }
.gridrow-a .column:first-child { margin-left: 0; }
.gridrow-a .column.centered { float: none; margin: 0 auto; }
.gridrow-a .column.w4 { width: 30.4%; }
.gridrow-a .column.w10 { width: 65.2%; }
.gridrow-a .column.w11 { width: 47.3%; }


.box {
     background: url(../images/box-bkg.png) repeat;
     display: inline-table;
    padding:20px;
}

.box p{
    font-family: 'PT Sans', sans-serif;
    font-size:15px;
   
}

 .box h4{
   font-family: 'PT Sans', sans-serif;
    font-weight:bold;
    font-size:18px;
    margin-bottom:15px;
    color:#165054;
}

jquery:

 <script type="text/javascript">
$(function() {
    $('.box').matchHeight();
});
</script>