Controlling vertical position of some text in a div?

I have two phras开发者_高级运维es of text in a div. The two phrases are vertically aligned in the middle of the div and they have different font sizes. I want the second phrase to be lower than its current position (a bit lower than the middle). How do I push the second phrase lower in the div without using javascript?

<div>
Phrase 1 - Phrase 2
</div

Something like this?

<div>
Phrase 1 - <span style="position:relative;top:4px;">Phrase 2</span>
</div>

Live Demo

My demo may not be exactly how you've got it set up, but the idea should work:

• Set position: relative and top: ?px on the second phrase.

HTML:

<div class="phrase">
    Phrase 1 - <span class="p2">Phrase 2</span>
</div>

CSS:

.phrase {
    font-size: 16px;
    background: #ccc;
    height: 40px
}
.p2 {
    font-size: 24px;
    position: relative;
    top: 11px
}

<div>
Phrase 1 - <span id="phrase2">Phrase 2</span>
</div>

and CSS does wonders:

#phrase2 { position: relative; top: .2em; }