matchHeight plugin _ line-height issue

by James

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.6.0/jquery.matchHeight.js"></script>
<ul>
    <li class="item">
        <div class="inner">
            <img src="http://i.imgur.com/XIHxhbJ.jpg" style="width:230px;">
        </div>
        <p>some text</p>
    </li>
    <li class="item">
        <div class="inner">
            <img src="http://i.imgur.com/YJJB0U2.jpg" style="width:130px;">
        </div>
        <p>some text</p>
    </li>
    <li class="item">
        <div class="inner">
            <img src="http://i.imgur.com/jLS93P3.jpg" style="width:190px;">
        </div>
        <p>some text</p>
    </li>
    <li class="item">
        <div class="inner">
            <img src="http://i.imgur.com/Wp9tb4Z.jpg" style="width:110px;">
        </div>
        <p>some text</p>
    </li>
    <li class="item">
        <div class="inner">
            <img src="http://i.imgur.com/aTKlf2Y.jpg" style="width:250px;">
        </div>
        <p>some text</p>
    </li>
</ul>

CSS

ul {
    float: left;
    list-style-type: none;
    padding-left: 0;
    width: 100%;
}
.item {
    border: 2px solid #000;
    float: left;
    margin: 15px;
    padding: 15px;
    position: relative;
}
img {
    width: 200px;
}

JavaScript

$(document).ready(function () {
    $('.item').matchHeight();
    console.log('hi');

});