Как сохранить кнопки на месте при изменении размера экрана на небольшую ширину?

Question

Я сейчас создаю страницу, которая позволяет пользователю редактировать заголовок. Когда ширина браузера превышает 700 пикселей, кнопки и ввод текста хорошо расположены, но как только размер браузера уменьшается до размера, который меньше размера кнопок, они оказываются друг над другом?

Вот то, что у меня есть для моего CSS кода:

.header-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 3%;
  height: 100px;
}

.header-button-group {
  float: right;
  flex-direction: row;
}

.header-textfield {
  margin-top: 10px;
  height: 35px;
}

.header-cancel-button {
  width: 50px;
}


.header-save-button {
  width: 50px;
}

Кажется, неважно, что я измените CSS положение кнопок, когда браузер имеет небольшую ширину, вообще не меняется. Любая помощь будет отличной