Height of bootstrap button changes with additional span - html

Question

I am using Bootstrap to create all button elements on our website.
The button height is created using line-height, which also helps with centering the text.
I want to include two different font sizes in one button. The standard size, and a smaller note. I have created a very stripped down version of this here with jsfiddle
This is the html.
<div class="button">
test
<small>(note)</small>
</div>
This is the CSS.
.button {
background-color: orange;
color: #fff;
width: 150px;
line-height: 60px;
font-size: 26px;
text-align: center;
vertical-align: middle;
}
small {
font-size: 15px;
}
The issue is that the height of the button gets increased by 4 pixels. Removing the smaller text, will again bring the button to it's correct height. How can solve this problem as I cannot have a higher button?
Having a fixed height attribute of 60px does not work either, because then the text is not centered vertically anymore.
Thank you for the help.

Answer 1

It gets OK (on chrome) if you add a vertical-align to your small tag
http://jsfiddle.net/eAZCN/3/
.button {
background-color: orange;
color: #fff;
width: 150px;
line-height: 60px;
font-size: 26px;
text-align: center;
vertical-align: middle;
}
.button small {
font-size: 15px;
vertical-align: middle;
line-height:10px;
}