How is this HTML5 brick falling down?

I've prepared a sample jsfiddle to show the problem I'm currently facing with my layout: when I insert a content dynamically into a particular element (the brick), the element sinks down together with its parent in a way that's beyond my understanding of HTML/CSS. When I remove the content, the original layout is restored, unless I'm using Chrome... then it would retain its position and fall down again when a new content is inserted.

Proof of concept: http://jsfiddle.net/GADk9/

The checkbox in the example simply toggles a text inside the brick, nothing more. I wonder where the above margin (is it?) comes from.

Here is a complete HTML5 document:

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>HTML5 Falling Brick - What is this?</title>
<style>
#brick {
    background-color: lightgray;
    border: solid black medium;
    border-radius: 1em;
    color: red;
    font-size: 2em;
    height: 100%;
    text-align: center;
}
#contrail { background-color: lightblue; width: 20em; }
#pit { display: table; }
#pit>* { display: table-cell; }
#pit>*>* { height: 4em; }
</style>
</head>
<body>
    <div>
        <label>Click me twice
            <input onchange="document.getElementById('brick').innerHTML = this.checked ? 'FALL!!!' : ''" type='checkbox'></input>
        </label>
    </div>
    <div id='pit'>
        <div>
            <div>
            </div>
        </div>
        <div id='contrail'>
            <div>
                <div id='brick'></div>
            </div>
        </div>
    </div>
</body>
</html>

Update

After reading again my question I realize it may suggest the incorrect impression that what I'm actually trying to accomplish is fixing some HTML. To emphasize the point explicitly, I don't need to change anything here. The example with the brick is just a funny demo of the issue I'm observing. I'm really interested in understanding what is causing the elements to change their position when a content is inserted in an arrangement like this.

Solution

This is easier to understand if you simplify the markup to just a couple of cells each containing a div.

<div class="cell left">
  <div class="inner"></div>
</div>
<div class="cell middle">
  <div class="inner"></div>
</div>
<div class="cell right">
  <div class="inner"></div>
</div>

Then assign each div a different height with some CSS like this.

.cell {
  display:table-cell;
  background-color:black;
  width:200px;
}

.inner {
  background-color:silver;
}

.left .inner {
  height:80px;
}
.middle .inner {
  height:140px;
}
.right .inner {
  height:100px;
}

By default these inner divs are vertically aligned to their baseline. So, without any text, all the divs align along the bottom of the cells:

       +------+
       |      |
       |      +------+
+------+      |      |
|      |      |      |
|      |      |      |
+------+------+------+

However, if you add text to any one of them, that div will be pushed down so that the baseline of the first line of text lines up with the bottom edges of the other divs.

       +------+
       |      |
       |      |
+------+      |      
|      |      +------+
|      |      |Text  |
+------+------+      |
              |      |
              +------+

As has been pointed out by others, you can change what happens by setting a different vertical-align property. For example, adding vertical-align:top to the .cell selector would give you something like this:

+------+------+------+
|      |      |Text  |
|      |      |      |
+------+      |      |
       |      +------+
       |      |
       +------+

I find it easiest to play around with this sort of thing in codepen, where you can see the changes as you make them. Here's an example to experiment with.