Same length sidebar

I have been trying to make it so that my sidebar is never longer than the main content area. Below is what I found on this support forum, but it doesn't work. The sidebar is still longer. (I selected the Events page in the URL below because the content area is almost always shorter than the sidebar.)

Add Elements -> Hook -> wp_footer

<!-- Requires Spacing 0.9 or GeneratePress 1.1.10 -->
<style>
.inside-left-sidebar,
.inside-right-sidebar {
background: #FFF;
}
</style>
<script type="text/javascript">
(function($) {

$.fn.equalHeightColumns = function(options) {

defaults = {
minWidth: -1, // Won't resize unless window is wider than this value
maxWidth: 99999, // Won't resize unless window is narrower than this value
setHeightOn: 'min-height' // The CSS attribute on which the equal height is set. Usually height or min-height
};

var $this = $(this); // store the object
options = $.extend({}, defaults, options); // merge options
// Recalculate the distance to the top of the element to keep it centered
var resizeHeight = function() {

// Get window width
var windowWidth = $(window).width();

// Check to see if the current browser width falls within the set minWidth and maxWidth
if (options.minWidth < windowWidth && options.maxWidth > windowWidth) {
var height = 0;
var highest = 0;

// Reset heights
$this.css(options.setHeightOn, 0);

// Figure out the highest element
$this.each(function() {

height = $(this).outerHeight();

if (height > highest) {
highest = height;
}

});

// Set that height on the element
$this.css(options.setHeightOn, highest);

} else {
// Add check so this doesn't have to happen everytime
$this.css(options.setHeightOn, 0);
}
};

// Call once to set initially
resizeHeight();

// Call on resize. Opera debounces their resize by default.
$(window).resize(resizeHeight);
// Also check if any images are present and recalculate when they load
// there might be an optimization opportunity here
$this.find('img').load(resizeHeight);
// If afterLoading is defined, add a load event to the selector
if (typeof options.afterLoading !== 'undefined') {
$this.find(options.afterLoading).load(resizeHeight);
}
// If afterTimeout is defined use it a the timeout value
if (typeof options.afterTimeout !== 'undefined') {
setTimeout(function() {
resizeHeight();
// check afterLoading again, to make sure that dynamically added nodes are present
if (typeof options.afterLoading !== 'undefined') {
$this.find(options.afterLoading).load(resizeHeight);
}
}, options.afterTimeout);
}

};
jQuery(window).load(function($) {
var columns = jQuery(".site-main, .inside-left-sidebar, .inside-right-sidebar");
jQuery(columns).equalHeightColumns({
minWidth: 960,
afterLoading: 'iframe, .facebook',
afterTimeout: 800
});
});

})(jQuery);
</script>