How do I align two different-sized fonts next to each other so that the smaller text is centered vertically with the larger text?

**HTML:**

```
<div id="parent">
    <span id="first">first</span>
    <span id="second">second</span>
</div>

```

**CSS:**

```
#first {
    font-size: 200%;   
}

#second {
    font-size: 100%;
}

```

**JSFiddle:** <http://jsfiddle.net/BmbWr/>