DIV same height as neighbor

This fiddle shows an example script on how to define same height on sibling-divs depending on the max height of their contents (images in this case).

HTML

<head></head>
<body>
    <div class="sidebar-contents">
        <div class="picture-row" id="1">
            <div class="picture item left">
                <div class="bildhalter">
                    <img class="picture" src="http://placekitten.com/g/200/150">
                </div>
                <div class="picture info">Infotext</div>
            </div>
            <div class="picture item right">
                <div class="bildhalter">
                    <img class="picture" src="http://placekitten.com/200/150">
                </div>
                <div class="picture info">Infotext</div>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
</body>

CSS

.picture-row {
    width: 100%;
    margin: 0.25em;
    max-width: 425px;
}

.left, .right {
    width: 45%;
    margin: 0.25em;
    float: left;
    position: relative;
}
.picture.info {
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    /* display: none für den IE */
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
.picture.info:hover {
    opacity: 1;
    display: block;
}
.left:hover > .picture.info, .right:hover > .picture.info {
    opacity: 1;
    display: block;
}
/* mit dem CSS-Selektor ">" wird festgelegt, dass alle Kind-Elemente, welches die genannte Klasse "bildinfo" haben auf das hovern über "links" oder "rechts" angewendet wird */
 img {
    width: 100%;
}

JavaScript

$(window).load(function () {
    $('.picture-row').parent('.sidebar-contents').css('overflow-y', 'scroll');
    $('.picture-row').each(function () {
        var rowHeight = 0;
        $(this).children('.picture.item').each(function () {
            if ($(this).innerHeight() > rowHeight) {
                rowHeight = $(this).innerHeight();
            }
        });
        $(this).children('.picture.item').each(function () {
            $(this).height(rowHeight + 'px');
            $(this).find('div img.picture').each(function () {
                marginHeight = ((rowHeight - $(this).height()) / 2);
                $(this).css('margin-top', marginHeight + 'px');
            }); // Ende div img.picture-each
        }); // Ende .picture.item-each
    }); // Ende .picture-row-each
}); // Ende window.load