Я пытаюсь стилизовать командную строку. Он должен работать в IE9, поэтому flexbox отсутствует. Вместо этого я используюdisplay:table раскладка.

Первый фрагмент (используя<span>s) это то, как я хотел бы, чтобы это выглядело. Второй фрагмент - это правильный HTML, и он неправильно оформлен. Элементы расположены не правильно, что приводит к нажатию второй кнопки вниз по линии, и границы не разрушаются.

Есть ли способ исправить это, не оборачивая кнопки? Если бы я это сделал, мне пришлось бы отменить и переделать много стилей, чтобы наложить рамку на обертку. Если все остальное терпит неудачу, я полагаю, я могу заменить<button> с<span role="button" tabindex="0"> везде.

html {
  font-size: 24px;
  line-height: 1rem;
}
* {
  font: 18px Calibri;
  box-sizing: border-box;
}
.controls {
  margin: 1rem;
  height: 1rem;
  width: 800px;
  border: 1px solid #c77;
  background-color: #eee;
  display: table;
  border-collapse: collapse;
}
.controls > * {
  display: table-cell;
  white-space: nowrap;
}
.spacer {
  width: 99%;
}
button,
span {
  height: 1rem;
  border: 1px solid #7c7;
  padding: 0 0.5rem;
  background: #f7f7f7;
}

<div class="controls">
  <div>Title</div>
  <div class="spacer"></div>
  <span>Button A</span>
  <span>Button B</span>
</div>

<div class="controls">
  <div>Title</div>
  <div class="spacer"></div>
  <button type="button">Button A</button>
  <button type="button">Button B</button>
</div>