Предотвращение смещения текста в Child of Flexbox Parent

Question

У меня есть два элемента в контейнере flexbox. Один из этих элементов - Tag, который я создал. Когда тег находится внутри гибкого контейнера, он, кажется, сдвигает текст к вершине Tag. Как мне предотвратить это?

Я попытался установить родительский контейнер на align-items: center;, что сжимает Tag.

HTML

<div>
  <span />
  <button>Resend</button>
</div>

CSS

div {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

span {
  padding: 3px 4.8px;
  text-align: center;
  line-height: 0.75rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
  font-size: 0.75rem;
  font-weight: bold;
  border: 1px solid;
  white-space: nowrap;
  background-color: red;
  color: #fff;
  border-color: red;
}

button {
  display: block;
  width: 100%;
  text-align: center;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.25s ease;
  color: blue;
  border-width: 1px;
  padding: 2px 4px;
  font-size: .857142rem;
  border-radius: 4px;
}

IMAGE

Answer 1

Похоже, происходит то, что элемент span увеличивает нижний отступ, чтобы соответствовать общей высоте элемента button, который находится рядом с ним.Одним из решений этой проблемы является добавление display:table; к CSS элемента span.После этого вы можете отрегулировать отступы диапазона, чтобы текст оставался по центру в диапазоне.Идея использования display:table для решения этой проблемы взята из Cris J в этой публикации .