I created the version of JSFiddle code you posted - see http://jsfiddle.net/RukbS/
In my JSFiddle, I don’t see the massive empty space under "Epic Fail", which is in your screenshot, so I assume that there is something in the code that you are using that you did not show us.
Not seeing your code actually in action, it's hard to understand what the difference is between it and the version I created, but looking at the screenshot, it looks very much like the paragraph “Epic Fail” ended in two lines.
The only way I could get my test to reproduce this is to put <br><br> right after the word “Fail”. I assume you are not doing this.
You might want to consider adding the line-height attribute from the stylesheet. Actually, this is not very much (since in any case it will depend on the font size), and this is what can cause what you see. If you really need some free space around the text, use padding or margin ; it is easier to control than line-height .
You did not indicate which browser you are using, which shows this effect. Perhaps you see something that only appears in some browsers. Most browsers these days have a good debugging tool that can help isolate such issues. In Firefox, you need to install the Firebug plugin; Most other modern browsers have a built-in Developer Tools feature.
Open the Firebug / Dev Tools window and use it to find the "Epic Fail" element. This will allow you to examine the size and shape of the element and what styles apply to it. This will almost certainly give you the information you need to solve the problem.
I know that I did not give you an answer that directly solves the problem, but I hope that some of the things that I have indicated here will lead you in the right direction to finding the problem.