Why is content of the inline-block affects its position in the container

Here's a fiddle that shows my code in action

The result seems crazy to me: in Chrome second button is slightly above the first. In Firefox it is slightly below.

<div id="accounts">
  <button class="account">
     <h1>VISA Card</h1>
     <span class="balance">-433.18</span>
  </button>
  <button class="account">
     <h1 class="plus"><i class="icon icon-plus-sign"></i></h1>
     <span class="plus-text">Add Account</span>
  </button>
</div>

What is even more confusing is that padding on the h1.plus affects the position of the whole div.

What is going on here? I want two buttons to show up on the same line and simply don't undestand why they aren't. Is this a bug in the rendering engine?

UPDATE: Narendra suggested an easy fix - float:left the buttons. I want to figure out why this misalignment happening in the first place.