equal heights button bottom

by lovromar

HTML

<div id="wrapper">
    <div class="col">
        <div class="content">
            <p>Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. last wordLorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. last word</p>
            <div class="btn-align-bottom">
            <a href="#" class="button moreinfo">More Info...</a>
            </div>
            </div>
    </div>
    <div class="col">
        <div class="content">
            <p>Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.</p>
            <div class="btn-align-bottom">
            <a href="#" class="button moreinfo">More Info...</a>
            </div>
            </div>
    </div>
    <div class="col">
        <div class="content">
            <p>Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.</p>
            <div class="btn-align-bottom">
            <a href="#" class="button moreinfo">More Info...</a>
            </div>
            </div>
    </div>
</div>

CSS

#wrapper {
    width: 500px;
    margin: 20px auto;
    overflow: hidden;
}
#wrapper > .col {
    float: left;
width: 27%;
margin: 0 15px 30px;
background-color: #fff;
text-align: center;
position: relative;

-moz-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
-webkit-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
}

#wrapper > .col > .content {
    padding:25px 27px 35px;
}
.content {
	margin-bottom:30px;
    position: relative;
    background: #bb0000;
    height: 100%;
}
.content h3 {
	font-size:1.375rem;
	font-weight:400;
	text-align:center;
	margin-bottom: 20px;
}
.content p {
	text-align:left;
}
.button.moreinfo {
	margin-top: 5px;
margin-bottom: 0;
padding-top: 0.5rem;
padding-right: 0.3rem;
padding-bottom: 0.5rem;
padding-left: 0.3rem;
background-color: #2a2a2a;
font-size: 0.9rem;
color: #f39c12;
font-weight: 400 !important;
}

div.btn-align-bottom{
    position: absolute;
    bottom: 50px;
    left: 0px;
    width: 100%;
}

JavaScript

$.fn.eqHeights = function() {

        var el = $(this);
        if (el.length > 0 && !el.data('eqHeights')) {
            $(window).bind('resize.eqHeights', function() {
                el.eqHeights();
            });
            el.data('eqHeights', true);
        }
        return el.each(function() {
            var curHighest = 0;
            $(this).children().each(function() {
                var el = $(this),
                    elHeight = el.height('auto').height();
                if (elHeight > curHighest) {
                    curHighest = elHeight;
                }
            }).height(curHighest);
        });
    };

    $('#wrapper').eqHeights();