Padding of one flex item influence the rest of flex items

Question

I have a flex parent with 2 inputs.One email input and one submit input.

On the email input i set some padding to move the placeholder text.This way, the email inputs height will grow(what i was expecting), but the problem is that the submit inputs height will grow as well.

Why this is happening and how can i stop it? I want the submit input to have a height smaller than the email input.

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

i am added align-items:center;. because, default align-items: is 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>