Submit button different height than the input field

Question

I have a form with the following code using React in Javascript:

    import React from 'react';
    import { FiSend } from 'react-icons/fi';
    
    export default function SubscriptionForm() {
      return (
        <div className="subscription-form">
          <form>
            <input
              type="text"
              className="subscription-form__input-field"
              placeholder="Je e-mailadres"
            />
            <button className="subscription-form__subscribe-button">Submit</button>
          </form>
        </div>
      );
    }

here's the css for the form:

    /*
        subscription form
    */
    .subscription-form {
      width: 100%;
      line-height: 200px;
      display: flex;
      justify-content: center;
    }
    
    .subscription-form__input-field {
      height: 45px;
      width: 400px;
      padding-left: 10px;
      border: 1px solid white;
    }
    
    .subscription-form__input-field::placeholder {
      color: black;
    }
    
    .subscription-form__input-field:focus {
      outline: none;
      box-shadow: none;
    }
    
    .subscription-form__subscribe-button {
      height: 45px;
      border: 0;
      background: red;
    }

I gave both the button and the text input the same height of 45 px but in my browser it appears like this:

Answer 1

.subscription-form__input-field {
  border: 1px solid white; /* You have border here. Pls remove this */
}