overflow：hidden将文本向下推

When I add overflow: hidden to the class of the first span (.welcome-show), for some reason it pushes the other ones down a bit. How can I fix this ? PHTML:

 <div class="col-lg-6 pull-left">
     <p>
         <span class="welcome-show">Здравей, <?php echo $this->EscapeHtml($user->nick) ?></span>
         <span class="rank">Ранк:
             <?php
                 switch ($user->role) {
                     case 1:
             ?>
             <span class="rank-vip">VIP</span>
             <?php
                     break;
                     case 2:
             ?>
             <span class="rank-vipplus">VIP+</span>
             <?php
                     break;
                     default:
             ?>
             <span class="rank-none">Никакъв</span>
             <?php
                     break;
                 }
             ?>
         </span>
         <span class="credits-show">Кредити: 
             <?php echo $this->EscapeHtml($user->credits) ?>
         </span>
         <a href="/charge-credits" class="credits-charge-link">
             <img src="/img/ui-icon-credits" class="ui-icon-credits"/>Заредете кредити
         </a>
         <a href="/edit" class="register">
             <span class="icon icon-settings ui-icon ui-icon-gear"></span>Настройки
         </a>
         <a href="/logout" class="register">
             <span class="icon icon-logout ui-icon ui-icon-close"></span>Излез
         </a>
     </p>
 </div>
 <?php
      } else {
  ?>
  <div class="col-lg-6 pull-left">
      <p>
          <a href="/login" class="login">
              <span class="icon icon-login ui-icon ui-icon-key"></span>Влез
          </a>
          <a href="/register" class="register">
              <span class="icon icon-register ui-icon ui-icon-person"></span>Регистрирай се
          </a>
      </p>
  </div>
  <?php
      }
  ?>

CSS:

.welcome-show {
    display: inline-block;
    max-width: 200px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

This will help you to align the other element that goes down center vertical. Change the height in my answer. Hope this helps :)

.the-other-element{
 height:100px;
 line-height:100px;
 ...
}

I just ran into this issue myself, so here's the simple solution I found in case anyone else comes across this question.

.welcome-show{
  float: left;
}

.rank{
  float: none;
}