Why does overflow hidden affect height and how can I fix it in this example?

This can also be fixed by adding vertical-align: top to the span's CSS rule. The reason that both rules fix the problem is that they enforce the vertical alignment of the divs.

Adding a vertical-align rule will keep you from potentially having the elements that follow from needing to be cleared.