Pourquoi est-ce que inline-block élément de contenu qui n'est pas aligné verticalement

Suis tombé sur un drôle de question CSS. Quelqu'un peut m'expliquer pourquoi la boîte ayant contenu n'est pas aligné verticalement?

Si vous mettez du texte à l'intérieur de la durée de la classe .divPutTextToFixIssue - il s'aligne correctement.

http://jsfiddle.net/KgqJS/88/

CSS:

   #divBottomHeader {
        background-color: #d5dbe0;
        height: 43px;
    }
    .divAccountPicker {
        display: inline-block;
        background: blue;            
        width: 200px;
        height: 40px;
    }
    .divAccountData {
        display: inline-block;
        background: red;
        width: 400px;
        height: 40px;
    }

HTML:

<div id="divBottomHeader">
        <div class="divAccountPicker">
           <span class="divPutTextToFixIssue"></span>                 
        </div>
        <div class="divAccountData">
            <span>Balance: $555</span>
        </div>
    </div>