Как убрать «дрожь» input при увеличении ширины?

Question

[Евгений Мельников]

При фокусе на input задано увеличение его ширины. При этом, когда фокус ставиться или убирается с одного input, то второй начинает "дрожать". Подскажите, пожалуйста, как это можно решить и можно ли вообще.
Вот ссылка на пример происходящего: https://youtu.be/_fXYPEE6mMs

.reg-form__input-wrap input:not(:last-child) {
    margin-bottom: 50px;
    width: 220px;
    font-size: 20px;
    border-radius: 13px;
    padding: 7px 10px;
    transition: .2s ease-in-out;
    caret-color: transparent;
}

.reg-form__input-wrap input:not(:last-child):focus {
    width: 270px;
}

.reg-form__input-wrap input {
    outline: none;
    border: none;
    text-align: center;
}

Comments

[Ankhena]

А зачем вы анимируете все свойства вместо только ширины?

[Евгений Мельников]

Ankhena, да, возможно, это некорректно, но я прописывал transition: width .3s ease-in и ничего не поменялось.

[Ankhena]

Евгений Мельников, остается делать песочницу на codepen.io, чтобы мы могли увидеть вашу проблему.

[Евгений Мельников]

Ankhena, хорошо, в будущем буду делать песочницы., это просто был мой первый вопрос. Но вопрос я уже решил.

Answer 1

[Антон Антон]

Положить их в разные контейнеры с полной шириной

Comments

[Евгений Мельников]

Я понял, в чем было дело. Спасибо большое.
Я не поместил в вопросе, но у меня был контейнер, в котором находились imput-ы. И они были во всю его ширину. Я просто расширил его и помещать их в разные контейнеры оказалось ненужным.
Уже как-то сталкивался с этой проблемой, но забыл, как ее решать. Спасибо еще раз, что напомнили!