Por que esse elemento de bloco inline tem conteúdo que não está alinhado verticalmente

Entrou em um estranho problema de CSS. Alguém pode explicar por que a caixa com conteúdo não está alinhada verticalmente?

Se você colocar texto dentro do intervalo com classe.divPutTextToFixIssue - alinha-se corretamente.

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

<div id="divBottomHeader">
    <div class="divAccountPicker">
       <span class="divPutTextToFixIssue"><span>                 
    </div>
    <div class="divAccountData">
        <span>Balance: $555</span>
    </div>
</div>​
#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;
}​

questionAnswers(4)

yourAnswerToTheQuestion