テキストオーバーフローの省略がラッパー内の2つのスパンのうちの1つにある場合

質問

省略記号に問題があります。以下は私のHTMLです。

<div id="wrapper">
    <span id="firstText">This text should be effected by ellipsis</span>
    <span id="lastText">this text should not change size</span>
</div>

純粋なCSSでこれを行う方法はありますか？ 以下は私が試したものです。

#firstText
{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#lastText
{
    white-space:nowrap;
    overflow:visible;   
}

このように表示されます。

このテキストはellipsisによって効果を発揮するはずです。

これが私の望む結果である一方

このテキストは...このテキストはサイズが変更されてはいけません。

どのように解決するのですか？

以下のように width に #firstText のようなものです。

#firstText
{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:150px;
    display:inline-block;
}

この例を確認する

http://jsfiddle.net/Qhdaz/5/