HTML <br /> tag breaks display: block

[Soopy]

I have this jsfiddle here: http://jsfiddle.net/sqszH/1/Basically, what I'm trying to do is to get the Hello World text to come underneath of the "long long long long" text directly under it. Is there a way to do this without changing the HTML?Cause I have a similar situation on a webpage, but I can't figure it out for the life of me. It's probably something really simple too. Perhaps someone can give me a hand here? That would be awesome!HTML:\[code\]<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>\[/code\]CSS:\[code\].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; }\[/code\]