Equal height for two divs

Question

I have 2 divs (6 columns each). In the div on the left is an image, in the div on the right is some quote. I want my right div's height to be the same as height of image.

Here is my code: http://codepen.io/matysflance/pen/PZXdBK

<div id="testimonials" class="container-fluid testimonials">
    <div class="row">
        <div class="col-lg-6 image">
                <img src="http://placehold.it/1100x700/f3e42a" alt="">
        </div>
        <div class="col-lg-6 quote">
            <blockquote>
                <p>"Integer posuere erat a ante venenatis dapibus posuere veit al..." </p>
                <cite>Susan Sims, Interaction Designer at XYZ</cite>
            </blockquote>
        </div>
    </div>
</div>

Answer 1

You can do this using jQuery

Just add the class same-height to the DIV´s you want to have the same height

jQUERY

jQuery(document).ready(function($) { //noconflict wrapper
    var heights = $(".same-height").map(function() {
        return $(this).height();
    }).get(),
    maxHeight = Math.max.apply(null, heights);
    $(".same-height").height(maxHeight);
});

Answer 2

You can make the container of both divs a flexbox, which will automatically apply equal heights to the child elements.

Try this:

.row { display: flex; }

Revised Codepen

By making .row a flex container, the children (.image and .quote) become flex items, and share equal height by default. See here for more details: https://stackoverflow.com/a/33815389/3597276