Подкладка одного гибкого элемента влияет на остальные гибкие элементы.

Question

У меня есть гибкий родитель с 2 входами. Один email вход и один submit вход.

На входе email я установил некоторые отступы для перемещения текста placeholder.высота входных данных email будет расти (что я и ожидал), но проблема в том, что также возрастет высота входных данных submit.

Почему это происходит и как я могу остановить это?Я хочу, чтобы высота ввода submit была меньше высоты ввода email.

HTML:

<div class="footer__form">
        <input type="email" class="footer__form--email" placeholder="enter your email for updates">
        <input type="submit" class="footer__form--submit u-uppercase-text" value="sign up">
</div>

CSS:

 &__form {
    flex-basis: 49%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;

     &--email {
      flex: 0 0 65%;
      padding: 1.5rem 1.5rem;
      }

    &--submit {
      flex: 0 0 30%;
    }
}

Answer 1

я добавлен align-items:center;.потому что по умолчанию align-items: равно stretch

.footer__form {
    flex-basis: 49%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items:center;
}
     .footer__form--email {
      flex: 0 0 65%;
      padding: 1.5rem 1.5rem;
      }

    .footer__form--email--submit {
      flex: 0 0 30%;
      font-weight: 700;

    }

<div class="footer__form">
        <input type="email" class="footer__form--email" placeholder="enter your email for updates">
        <input type="submit" class="footer__form--submit u-uppercase-text" value="sign up">
</div>