Foundation 5 Vertical Align Equalizer

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/foundation.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/foundation.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic"></script>
<header>
    <div class="row" data-equalizer>
        <div class="small-12 medium-4 large-4 centered colXumns header1" data-equalizer-watch>
HI
        </div>
        <div class="small-12 medium-8 large-8 centered colXumns header2" data-equalizer-watch>
             <h1 class="the_title">Center for Interprofessional Education</h1>
        </div>
    </div>
</header>

CSS

body { padding: 60px; }


.header1 {background-color:#cccccc;}
.header2 {background-color:#708090;}
header .row {
    display:table;
}
.header1,
.header2 {
    display:table-cell;
    vertical-align:upper;
}
@media screen and (max-width:360px) {
    .header1,.header2 {display:block;}
}

JavaScript

$(document).foundation();