How to stop two right-aligned elements wrapping around

<div class="navbar-header navbar-right">
  <ul class="nav navbar-nav">
    <li>
      <a *ngIf="!auth.loggedIn" [routerLink]="['auth/signin']">Login</a>
      <a *ngIf="auth.loggedIn" [routerLink]="['auth/profile']" routerLinkActive="active">Welcome {{currentUserName}}</a>
    </li>
    <li>
      <a (click)="signOut()" *ngIf="auth.loggedIn">Logout</a>
  </ul>
</div>
<form class="navbar-form navbar-right" id="searchForm">
  <div class="form-group">
    <input
      class="form-control"
      placeholder="Search Characters"
      type="text"
    />
  </div>
  <button class="btn btn-default">Search</button>
</form>

<div class="navbar-header navbar-right">
  <ul class="nav navbar-nav">
    <li>
      <a *ngIf="!auth.loggedIn" [routerLink]="['auth/signin']">Login</a>
      <a *ngIf="auth.loggedIn" [routerLink]="['auth/profile']" routerLinkActive="active">Welcome {{currentUserName}}</a>
    </li>
    <li>
      <a (click)="signOut()" *ngIf="auth.loggedIn">Logout</a>
  </ul>
</div>
<form class="navbar-form navbar-right" id="searchForm">
  <div class="form-group">
    <input
      class="form-control"
      placeholder="Search Characters"
      type="text"
    />
  </div>
  <button class="btn btn-default">Search</button>
</form>