Why hidden input is affecting my layout? LF Explanation

I needed to use an hidden input to transfer some IDs to the page for each block.. whatever.

I have the following code :

<div id="shipping_box" class="formSep well">
    <div id="default_shipping_box" class="shipping_box row-fluid">
        <div class="span1">
            <input type="hidden" name="tracking_id" value="" />
        </div>
    </div>
</div>

This code work well and the result is what I expected.

If I do this :

<div id="shipping_box" class="formSep well">
    <div id="default_shipping_box" class="shipping_box row-fluid">
        <input type="hidden" name="tracking_id" value="" />
        <div class="span1">

        </div>
    </div>
</div>

The layout is not respected. See this picture for the demostration :

Can someone explain why to me ? Hidden input aren't suppose to be "hidden" so they shouldn't affect the layout ?

jsfiddle : http://jsfiddle.net/t9M3C/

Near line 285