Проблема с пониманием проблемы выравнивания при использовании display inline-flex

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

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

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

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
}
svg {
 height: 1rem;
}

<div>
  <button>
    <span>Some Text</span>
  </button>
  <button>
    <svg viewBox = "0 0 320 512"><path d = "M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
  </button>
</div>