With jQuery equalizeBottoms you can "equalize" the bottoms of multiple elements, making columns heights even, even when CSS refuses to help. Keep in mind that you should still do everything you can in CSS first.. but then, after you've exhausted all your other options, this plugin may help!

Click the "add text" and "remove text" buttons below to see jQuery equalizeBottoms in action!

An example

This is box 1
This is the first div in column 1
This is the second div in column 1. Something else and then more and more and more and more and more and more and more and more and more
add text | remove text This is the last div in column 1, the div whose bottom shall be equalized
This is the first div in column 2
add text | remove text This is the second div in column 2. Something else and then more and more and more
This is the last div in column 2, the div whose bottom shall be equalized (note the top padding)
This is box 2
This is the first div in column 3
This is the second div in column 3. Something else and then more and more and more and more and more and more and more and more and more
add text | remove text This is the last div in column 3, the div whose bottom shall be equalized
add text | remove text This is the first div in column 4
This is the second div in column 4. Something else and then more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more
This is the last div in column 4, the div whose bottom shall be equalized (note the bottom padding)

The code

Note that jQuery custom events are used in this example. You could just as easily remove all the custom events code, just calling equalize() right after it is defined, then again inside each click handler function, but that's up to you. Also note that if you don't have the luxury of knowing when the element heights may change, use the jQuery doTimeout plugin to set up a polling loop or to debounce events like window.onresize. 

$(function(){
  
  // This one function perform multiple equalizeBottoms calls.
  function equalize(){
    
    // For each dashed-border box, equalize bottoms of the last div in each column.
    $('.box').each(function(){
      $(this).find('.column > :last-child').equalizeBottoms();
    });
    
    // Equalize bottoms of both dashed-border boxes.
    $('.box').equalizeBottoms();
  };
  
  // Bind a custom 'equalize' event to document, then trigger it immediately.
  $(document).bind( 'equalize', equalize ).trigger( 'equalize' );
  
  // Bind click handlers for this example.
  $('a.add').click(function(){
    var txt = 'This is some sample text that should hopefully wrap!';
    $(this).closest( 'div' ).append( '<em> ' + txt + ' <\/em>' );
    
    // Trigger equalizeBottom (the event will bubble).
    $(this).trigger( 'equalize' );
    
    // Prevent default click action.
    return false;
  });
  
  $('a.remove').click(function(){
    $(this).closest( 'div' ).find( 'em:last' ).remove();
    
    // Trigger equalizeBottom (the event will bubble).
    $(this).trigger( 'equalize' );
    
    // Prevent default click action.
    return false;
  });
  
});