Выравнивание по горизонтали - исправлено

Как сделать элементы input одинаковыми по горизонтали?

В процессе создания сервиса TelegramID, который позволяет в один клик узнать id группы или канала в Telegram столкнулся с проблемой: поле input (куда нужно вводить адрес канала или группы) выходил за границы таблицы и не разу не совпадал с горизонтальными размерами кнопки. Выглядело это следующим образом:
одинаковыми по горизонтали

Причем самым неприятным было то, что стили:

.input_name_field,
.get_id_button {
/* width: 100%; */
background-color: #ffffff;
border-radius: 5px;
border: 1px solid #ffffff;
font-size: small;
box-shadow: 1px 1px 10px rgb(173, 173, 173);

прекрасно работали в Edge, но совершенно не работали в Chrome.

Стал разбираться с этой проблемой, и оказалось, что я не первый человек с ней столкнувшийся. Решение нашлось — очень простое, кстати:
1. В родительском элементе (форма) делаем: display: flex
2. Добавляем туда же: flex-direction: column
3. В стилях поля input и кнопки убираем: width: 100%
4. Радуемся:
Выравнивание по горизонтали - исправлено

Как всегда — в случае возникновения вопросов пишите на почту или в Telegram.