word-wrap - HTMLタグ区切り表示: ブロック

Question

ここにこの jsfiddle があります: http://jsfiddle.net/sqszH/1/

基本的に、私がやろうとしているのは、Hello World テキストを、そのすぐ下にある「長い長い長い長い」テキストの下に配置することです。HTMLを変更せずにこれを行う方法はありますか?

私はウェブページで同様の状況を抱えていますが、一生それを理解することはできません. それはおそらく、本当に単純なものでもあります。おそらく誰かが私に手を貸してくれませんか？それは素晴らしいでしょう！

HTML:

<div class="test">
<div class="first-span">first span</div>
    <div class="second-span">some long long long long long long long long long long text<br /><span>Hello World</span></div>
    <br class="clear" />
</div>

CSS:

.test{
    width:100%;
}
.first-span{
    border:1px solid red;
    box-sizing: border-box;
    float: left;
    padding-right: 1em;
}
.second-span{
    box-sizing: border-box;
    border:1px solid blue;
}
.clear
{
 clear: both;   
}