다른 div elemnt 옆에있는 div 요소

메시징 앱을 만들려고합니다. 나는 metroui.org.ua에서 좋은 CSS를 발견했다. 내 앱이 이렇게 보이길 원합니다. 다른 div elemnt 옆에있는 div 요소

This is the way I want the div to look like

이

내가 작성한 코드입니다.

<div > 
    <div style="display: inline; padding-left: 150px; width: 50px; float: left;"> 
     Hi Username, 
     <br /> 
     Company 
    </div> 
    <div style="padding-left: 50px; padding-right: 200px; display: inline-block"> 
     <div class="balloon right"> 
      <div class="padding20"> 
       Balloon is represent to create information or dialog UI. You can put inside any 
       of elements. 
      </div> 
     </div> 
    </div> 
</div>

작동하지만 회사에 <br/> 태그를 붙이면 엉망입니다. 또한 올바르게 표시하려면 풍선 도움말이 표시되지 않습니다.

출처

2013-11-20 Adrian Viegas