Отдалечаване и приближаване спрямо друг елемент

[anonymous12]

Искам да направя,ако имам надпис с текст Logged in as Username и до този текст имам друг текст с надпис Logout втория текст спрямо първия да се доближи до първия ако Username е дълъг и той да се отдалечава,ако е къс да се приближава за да не стане текстовете да се качат един върху друг ето кодовете

[css]#logged_icon{
background-image:url("../img/index/icons.png");
width:19px;
height:19px;
margin:7.5% 0 0 0;
}
p#logged{
font-familyroximaNova Light;
font-size:18px;
margin:-5.5% 0 0 6%;
}
#logout_icon{
background-image:url("../img/index/icons.png");
background-position:0 -38px;
width:19px;
height:19px;
margin:-5.4% 0 0 75%;
}
p#logout{
font-familyroximaNova Extrabold;
font-size:18px;
float:right;
margin:-5.6% 3% 0 0;
}[/css]

        <div class="login_cont">
          <div id="logged_icon"></div><p id="logged"><span style="color:#8aa822">Logged in as</span><b> Username</b></p>
          <div id="logout_icon"></div><p id="logout"><span style="color:#cd3905">Logout</span></p>
        </div>

 

[Hous]

Ако правилно съм разбрал,сложи ги в един по-широк div
и на това в лято му дай float:left а на това в дясно float:right;
Другиа вариант (говоря на магия) е самия див които ги "държи" да няма width: определено, за да може да се местят сами, но ако около него има разни елементи които го ограничават не виждам п ростичко решение.