I'm one helluva programmer but suck at design.   I can get around my way HTML/CSS but don't have mastery thus the reason I ask for your help.

<style>
 span.left { position: absolute; left: 0; }
 span.right {position: absolute; right: 0; }
 div.line { position: relative; text-align: center; width: 100%; }
</style>

<div class="line">
<span  class="left">
Abc Foo Bar Feh
</span>

<span class="right">
Xyz Woo
</span>
</div>

When it renders
it renders like
Abc Foo Bar Feh _________________________________________ Xyz Woo

where _ is space
now this is fine, but if we shrink the width of the browser, then Xyz Woo and Bar Feh overlay each other.   

Where what I will like is something like
Abc Foo Bar Feh
______ Xyz Woo

Google does this with their menu
Web, Images, Videos, ______________________________ Search Settings, Sign In

Abeg help. :-D

<div id="left" style="float:left"><p>Abc Foo Bar Feh</p></div>
<div id ="right" style="float:right"><p>Xyz Woo</p></div>

thanks man, another friend just gave me the solution too, same exact as yours. thanks again.