Bootstrap 4: предотвращение перехода div на новую строку, когда текст кнопки превышает оставшееся пространство

Question

Я создаю панель навигации с Bootstrap 4, которая будет состоять из логотипа в верхнем левом углу и пользовательской кнопки в верхнем правом углу, которая должна занимать оставшееся пространство от логотипа вправо и не должна вызывать прыжок контейнера кнопки.на новую строку, когда текст длиннее доступного пространства, и вместо этого сделайте многоточие над текстом (значок переключателя не должен исчезать, многоточие должно влиять только на текст), но удерживайте кнопку (теперь измененную в размере) на той же строке, что и логотип.

Затем во второй строке появится меню (некоторые ссылки для навигации), а также раскрывающийся список выбора языка, но это еще одна тема, я упоминаю ее только как справочную.

ВНа рисунке вы увидите, что кнопка не только переходит на новую строку, но и принимает ширину 100%, когда я ожидаю, что эта ширина будет соответствовать тексту.

На следующем изображении вы видите более или менее то, чего я хотел бы достичь, и я говорю «более или менее», потому что, поскольку я не могу достичьу него есть проблемы, вы не видите значок переключателя кнопок, и если вы щелкнете по нему, то не появится ни одно раскрывающееся меню.но вы можете увидеть многоточие и усеченный текст, что в порядке.

.nav-item {
  text-align: right;
}

.selectpicker {
  font-size: 24px !important;
}


/* *** */

.flex-parent {
  display: flex;
  align-items: center;
}

.long-and-truncated {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.short-and-fixed {
  white-space: nowrap;
}

.long-and-truncated-with-child {
  flex: 1;
}

.long-and-truncated-with-child-corrected {
  flex: 1;
  min-width: 0;
  /* or some value */
}

<div class="navbar navbar-expand-md bg-dark navbar-dark">
  <div class="container" style="border: 1px solid #fff">
    <!-- Brand -->
    <div class="col-* pl-0 pr-0 mr-2" style="border: 1px solid red">
      <a class="navbar-brand mr-0" href="{{cirsaApp.cirsaWebsiteUrl}}" target="_blank" style="border: 1px solid #fff">
        <img src="http://whatson.ae/dubai/wp-content/uploads/2016/08/img-world-of-adventure-10.jpg" />
      </a>
    </div>

    <div class="col pr-0 pl-0 text-truncate" style="border: 1px solid red; ">
      <!-- User menu -->
      <div class="dropdown flex-parent" style="border: 1px solid #fff; " *ngIf="(isLoggedIn | async)">
        <button type="button" class="btn btn-success dropdown-toggle long-and-truncated" data-toggle="dropdown" id="userDropdown">
              {{userName | async}}
            </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
          <div class="dropdown-divider"></div>
          <a [routerLink]="['/login']" class="dropdown-item">Logout</a>
        </div>
      </div>
    </div>
  </div>
</div>

Я надеюсь, что кто-нибудь может мне помочь с этим.Заранее спасибо.