Использование css для создания кнопок, которые охватывают горизонтально, но кнопка остается размером слова

Question

Я пытаюсь создать шаблон электронной почты, используя HTML и CSS. У меня в настоящее время есть "ОТ" и "ПРЕДМЕТ" под моим заголовком. Я хочу, чтобы обе эти кнопки были активными только при нажатии одной или другой кнопки. На данный момент у меня просто две кнопки большой ширины. Но я хочу иметь класс кнопки и класс span, который создает пространство. Мой текущий код ниже:

.myBtnHeader {
  width: 300px;
  text-align: left;
  font-weight: bold;
  color: black;
  padding: 1px;
  margin: 4px 2px;
}

.unread {
  margin-right: 1.25em;
  padding: 10px;
}

<div data-role="controlgroup" data-type="horizontal">
  <a data-role="header" class="btn myBtnHeader"><span class="unread"><u>FROM</u></span></a>
  <a data-role="header" class="btn myBtnHeader"><span class="unread"><u>SUBJECT</u></span></a>
</div>

Если кто-то сможет помочь, это будет удивительно. Я хочу, чтобы это выглядело примерно так:

| КНОПКА | --------- span -------- | КНОПКА |

Извините за отсутствие форматирования

Answer 1

Как уже упоминалось, CSS Сетка может быть хорошим решением для вас. Однако вместо использования разрыва сетки я бы использовал go с пустым столбцом сетки, ширина которого может быть 1fr (занимают все доступное дополнительное пространство). Это позволит реагировать на изменения ширины области просмотра или просмотра на экранах разных размеров.

Я рекомендую узнать все, что вы можете о CSS Grid и Flexbox (еще один полезный инструмент). Смотрите эти статьи:

https://css-tricks.com/snippets/css/complete-guide-grid/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Оформить заказ на этот код: https://codepen.io/juan-g-04/pen/PoqoyyY

Используйте инструменты разработчика вашего браузера для проверки макета. В Mozilla Firefox вы можете выделить сетку или flexbox следующим образом: (см. Нижнюю часть изображения, где находится всплывающая подсказка. И обратите внимание на розовые линии, выделяющие внутренние границы сетки)

Answer 2

Вы можете использовать контейнер сетки и установить разрыв между кнопками с сеткой.

.buttons-container {
  display: grid;
  grid-template-columns: min-content min-content;
  grid-gap: 30px;
}

Проверить код ручки