текстовая кнопка отображается в несколько строк

Question

У меня есть кнопка заголовка, которая отображается на нескольких строках.

<div class="container">
    <span style="left:32px;">MALISIMMO</span>
    <button  class="btn1" style="left:150px;">Buy</button>
    <button class="btn1" style="left:300px;">About Us Us Us</button>
    <button class="position3" >SIGN IN</button>
</div>

См. Скрипку (https://jsfiddle.net/flamant/09csye6f/31/). О нас Us Us отображается в три строки. Как вывести его на одной строке?

Answer 1

Добавить white-space: nowrap

.btn1 {
  border: none;
  background-color: inherit;
  cursor: pointer;
  position: absolute;
  white-space: nowrap;
}

Answer 2

Удалить все правила стиля position:

.container {
  height: 65px;
  display: flex;
  align-items: center;
}

.container > *{
  flex-grow: 1;
}

.btn1 {
  border: none;
  background-color: inherit;
  cursor: pointer;
}

<div class="container">
	<span style="left:32px;">MALISIMMO</span>
	<button  class="btn1" style="left:150px;">Buy</button>
	<button class="btn1" style="left:300px;">About Us Us Us</button>
	<button class="position3" >SIGN IN</button>

</div>