Two divs are positioned next to each other with a width of 50% each. One of the divs contains more text, causing it to be longer than the other div. A javascript function adjusts the height of the shorter div to match the height of the longer div, ensuring they both appear the same height.
Issue: After resizing the window to a smaller size (tablet size) both divs adjust their height accordingly. However, when the window is returned to its normal size, the div heights remain the same as after the resize and do not revert to their original state.
JavaScript code for handling window resize:
$(document).ready(function() {
function adjustHeight() {
var leftHeight = $('.leftblock').height();
var rightHeight = $('.rightblock').height();
if (leftHeight > rightHeight){
$('.rightblock').css('height', leftHeight);
} else {
$('.leftblock').css('height', rightHeight);
}
}
$(adjustHeight);
$(window).resize(adjustHeight);
});
Example:
http://jsfiddle.net/hg0L01ex/