Script to force unrelated elements to have the same height. Does not dynamically adjust for changes in content but you can re-run the "apply" function after a data change if you need to allow for changing content.

even_height.coffee

# https://gist.github.com/eric1234/13501faf7471a45d10be

class @EvenHeight

  constructor: (@elements...) -> @apply()

  apply: ->
    # In case the page doesn't have the elements so we don't have to
    # check when calling the constructor.
    return if @elements.length == 0

    # Fix the height of the document body so the page doesn't jump
    # around as we are adjusting the height of elements.
    $(document.body).height $(document.body).height()

    max = @max_height()
    for element in @elements
      element = $ element
      outer_height = element.outerHeight()
      inner_height = @real_height element
      filling = outer_height - inner_height
      unless max == outer_height
        element.attr 'data-orig-height', inner_height
        element.css height: max - filling + 'px'

    # Return the height of the document to be fluid
    $(document.body).css height: 'auto'

  max_height: ->
    max = 0
    for element in @elements
      element = $ element
      element.height orig if orig = element.attr 'data-orig-height'
      height = @real_height element
      max = height if height > max
    max

  real_height: (element)->
    if element.css('box-sizing') == 'border-box'
      element.outerHeight()
    else
      element.height()