Bootstrap 3 - Как максимизировать ширину ввода внутри navbar

Прямо сейчас у меня есть панель навигации, которая выглядит следующим образом:http://bootply.com/78239

Я хочу максимизировать ширину текстового ввода «поиск», не создавая разрывов строк (то есть, что ссылка «Очистить» будет тесно связана со ссылкой «О программе»).

У меня есть только базовый опыт работы с CSS и веб-дизайном. Я читаю кое-что оoverflow: hidden"трюки, но я не понимаю, как использовать его, когда есть больше элементов справа от целевого элемента.

Спасибо

РЕДАКТИРОВАТЬ:

Частичным решением может быть установка ширины «вручную» для каждого случая, как вhttp://bootply.com/78247 :

@media (max-width: 767px) {
  #searchbar > .navbar-form {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #searchbar > .navbar-form {
    width: 205px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #searchbar > .navbar-form {
    width: 425px;
  }
}

@media (min-width: 1200px) {
  #searchbar > .navbar-form {
    width: 625px;
  }
}

но это решение не будет работать, когда тексты меню являются «динамическими» (например, содержат «Hello username»).

Я полагаю, что это не большая проблема, если вы предполагаете, что есть ограничения на ширину текстов меню - просто раздражает вычислять / тестировать эти ширины вручную. Мне просто любопытно узнать, есть ли удобный способ сделать это автоматически.