Ширина элемента равна ширине самого широкого дочернего элемента, бок о бок, не занимая всю ширину

Question

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

Я пытался display: inline-block для родителя, но, очевидно, это работает только для элементов, которые находятся друг с другом (не бок о бок). Я также пытался работать с display: inline-flex и flex-direction, но снова я оказался с элементами, которые не соседствуют друг с другом.
Это очень просто с display: grid, но я не могу сделать его более гибким и отзывчивым.

Поскольку эта проблема очень специфична (я думаю), я сделал кодовую ручку: https://codepen.io/obendev/pen/vYYJGxj

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.buttons-grid {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: 1fr 1fr;
  margin-left: auto;
  margin-right: auto;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-top: 4rem;
}

.button a {
  align-items: center;
  background-color: #ffcf2f;
  border-radius: 80px;
  color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 1.375rem 2.75rem;
  text-transform: uppercase;
  transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media (hover: hover) {
  .button a:hover {
    background-color: #0562af;
  }
}
.button a svg {
  fill: currentColor;
  height: 1rem;
  margin-right: 0.375rem;
  width: 1rem;
}

.site-width {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  padding: 2rem 3.125rem;
}

a {
  color: currentColor;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

html {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
}

<div class="site-width">
    <div class="buttons">
        <div class="button">
            <a href>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                    <path d="M62.2 45.2l-14-6c-1.2-.5-2.7-.2-3.5.9l-6.2 7.6c-9.7-4.6-17.6-12.4-22.1-22.1l7.6-6.2c1-.8 1.4-2.3.9-3.5l-6-14c-.6-1.3-2-2.1-3.4-1.7l-13 3C1 3.4 0 4.6 0 6c0 32.1 26 58 58 58 1.4 0 2.6-1 2.9-2.3l3-13c.3-1.4-.4-2.9-1.7-3.5z"></path>
                </svg>
                <span>short</span>
            </a>
        </div>
        <div class="button">
            <a href>looooooooooooooong</a>
        </div>
    </div>

    <div class="buttons-grid">
        <div class="button">
            <a href>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                    <path d="M62.2 45.2l-14-6c-1.2-.5-2.7-.2-3.5.9l-6.2 7.6c-9.7-4.6-17.6-12.4-22.1-22.1l7.6-6.2c1-.8 1.4-2.3.9-3.5l-6-14c-.6-1.3-2-2.1-3.4-1.7l-13 3C1 3.4 0 4.6 0 6c0 32.1 26 58 58 58 1.4 0 2.6-1 2.9-2.3l3-13c.3-1.4-.4-2.9-1.7-3.5z"></path>
                </svg>
                <span>short</span>
            </a>
        </div>
        <div class="button">
            <a href>looooooooooooooong</a>
        </div>
    </div>
</div>

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