Nested inline element 'vertical-align' behaves different on Chrome and Firefox

Question

I put a span element inside a span, and set vertical-align: 20px for the outer span and vertical-align: top for the inner span. HTML and CSS code is he