jQuery matchHeight.js for Column Awesome

kangrian.com

by freedawirl

HTML

<script src="//www.responsivegridsystem.com/js/jquery.matchHeight-min.js"></script>
Demo :<Br/>
<div id="wrapper">
    <div class="kolom">
        <p>
        Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. 
        </p>
    </div>
    
    
    <div class="kolom">
        <p>
        Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf.
        </p>
    </div>
    
    <div class="kolom">
        <p>
        Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.
        </p>
    </div>
    
</div>

CSS

body { font-family:arial,sans-serif; }
#wrapper {
    clear:both;
    display:block;
}
#wrapper:after { content:'';clear:both;display:table; }
#wrapper .kolom {
    display: block;
	float:left;
    width: 33.3%;

}
#wrapper .kolom p {
    background:#ddd;
    margin:5px;
    padding:10px;
}

JavaScript

jQuery(function($){
    $('.kolom p').matchHeight();
});
// Don't Forget for using External JS to http://www.responsivegridsystem.com/js/jquery.matchHeight-min.js in Your HTML Head!