Vertically center text which is beside a much larger , both inside a

Question

I am trying to vertically center some text in a element, in relation to a much larger that is a sibling of the first one.

Answer 1

If you want the left one-line text to align to the first line of multi-line text on the right, you need to use vertical-align: baseline instead of vertical-align: middle along with display: table-cell. .previewLabel doesn't need a set line-height.

DEMO

.previewLabel {
    vertical-align: baseline;
}

span {
    display:table-cell;
}

Answer 2

Adding vertical-align:middle to both .previewLabel and .previewText will work just fine.

And here is a fiddle for proof: http://jsfiddle.net/pavloschris/5chXG/4/