Кнопки HTML/CSS перемещаются вертикально, когда текст меняется с одной на две строки. ⇐ CSS

[Anonymous]

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


Когда кнопка нажата и теперь должна отображаться две строки текста, вот результат:


Нажатая кнопка не двигается, но, как видите, все остальные перемещаются вниз.
Вот HTML:

Код: Выделить всё

TEST






%STATE_UP%
%STATE_OFF%
%STATE_DOWN%

Вот CSS:

Код: Выделить всё

html {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
h1 {
font-size: 1.8rem;
color: white;
}
body {
padding: 25px;
}
.card-grid {
max-width: 800px;
display: grid;
gap: 15px;
grid-template-columns: auto;
}
button {
text-align: center;
font-size: 25px;
width: 150px;
height: 150px;
}
.button-up {
background-color: green;
}
.button-off {
background-color: red;
}
.button-down {
background-color: green;
}

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

Подробнее здесь: https://stackoverflow.com/questions/792 ... -two-lines