Auto-height

by Austin Stewart

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="container">
    <div class="test">
        <div>alsfkjsalfk alsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslfkjsd afldskj fldsjf alsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslalsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslalsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslalsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslalsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslalsfkj aslfj aslfkj sdlkfj dslafkj adslfj dsl sfkjsalfk alsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslfkjsd afldskj fldsjf alsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslalsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslalsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslalsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslalsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslalsfkj aslfj aslfkj sdlkfj dslafkj adslf</div>
    </div>
    <div class="test">
        <div>alsfkjsalfk alsfkj aslfj aslfkj sdlkfj dslafkj</div>
    </div>
    <div class="test">
        <div>alsfkjsalfk</div>
    </div>
    <div class="test">
        <div>alsfkjsalfk al afldskj fldsjf</div>
    </div>
    <div class="test">
        <div>alsfkjsalfk alsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslfkjsd afldskj fldsjf alsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslalsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslalsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslalsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslalsfkj aslfj aslfkj sdlkfj dslafkj adslfj dslalsfkj aslfj aslfkj sdlkfj dslafkj adslfj dsl</div>
    </div>
    <div class="test">
        <div>alsfkjsalfk alsfkj aslfj aslfkj sdlkfj dslafkj</div>
    </div>
    <div class="test">
        <div>alsfkjsalfk</div>
    </div>
    <div class="test">
        <div>alsfkjsalfk al afldskj fldsjf</div>
    </div>
</div>

SCSS

.container {
    .test {
        width: 50%;
        float: left;
        padding: 10px;
        div {
            padding: 5px;
            background: red;
            color: white;
        }
    }
}

JavaScript

function heightCheck(target) {
    var height = 0;
    $(target).css('height', 'inherit');
    $(target).each(function () {
        vheight = $(this).height();
        if (height < vheight) {
            height = vheight;
        }
    });
    $(target).height(height + 'px');
};

heightCheck('.test div');

$(window).resize(function() {
    heightCheck('.test div')
});