Question

http://jsfiddle.net/RaP2D/5/

I’ve been trying for a while to figure out how to make ‘Small Text’ vertically-align with ‘Large Text’. I did some reading, tried various examples with wrapping the content, using display:table, etc.

I would prefer not to float the elements, but if that is the easiest way then OK.

Any ideas?

Answer 1

Adding the rule vertical-align:middle; to #OrdersEditTitle seems to do it.

jsFiddle example

#OrdersEditTitle {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 5px;
    color: #2E6E9E;
    display: inline-block;
    vertical-align:middle;
}