html - div の前にテキスト要素を折り返す

Question

次の例をセットアップしました: http://jsfiddle.net/Xj5cH/

<div id="box">
    <span id="text">This is some text. Hello World!</span>
    <div id="sidebar"></div>
</div>

#box {
    height:50px;
    width:200px;
    border:1px solid;
}

#text {
    font-size:16px;
}

#sidebar {
    height:100%;
    width:50px;
    float:right;
    background-color:yellow;
}

幅を明示的に設定せずに、テキスト要素をサイドバー div の前に適切に折り返すにはどうすればよいですか?