How to set a Stripes element CSS to match a bootstrap form-control input CSS properties for size, vertical alignment, focus, etc

Question

I have this form here for a credit card. I'm using Stripe's elements to create the card number input field. Just above the card number I have a name field, which vertically centers the name and placeholder, with a size, height, vertical alignment, etc.

QUESTION - What CSS properties can I use to set the Stripe card number, expiration and cvc field and placeholder field to be the same (vertical alignment) as the bootstrap input field? Specifically, how can I align the placeholder and text inside the element to a vertical center (like the bootstrap element)?

FYI - See how it's lower in the element than the bootstrap placeholder!

I can set CSS properties for the element like this below, but don't know which properties to use?

var style = {
  base: {
    // iconColor: '#666EE8',
    // color: '#31325F',
    // lineHeight: '40px',
    // fontWeight: 300,
    // fontFamily: 'Helvetica Neue',
    // fontSize: '15px',

    '::placeholder': {
      // color: '#CFD7E0',
      // fontSize: '1rem',
      // fontWeight: '400',
      // lineHeight: '1.5'
    },
  },
};


this.cardNumber = elements.create('cardNumber', {
  style: style
});
this.cardNumber.mount(this.cardNumberElement.nativeElement);

<div class="mt-4" [formGroup]="paymentForm">
  <div class="row">
    <div class="form-group col-12">
      <label class="control-label">Name on card</label>
      <input placeholder="ex. John Smith" class="form-control" name="nameOnCard" formControlName="nameOnCard">
    </div>
    <div class="form-group col-6">
      <label class="control-label">Card Number</label>
      <div #cardNumber id="cardNumber" class="form-control py-3"></div>
    </div>
    <div class="form-group col-3">
      <label class="control-label">Expiration</label>
      <div #cardExpiry class="form-control py-3"></div>
    </div>
    <div class="form-group col-3">
      <label class="control-label">Cvc</label>
      <div #cardCvc class="form-control py-3"></div>
    </div>
  </div>
</div>

If I remove the py-3 from the element class then it looks like this where the placeholder is too high AND nothing gets typed into the element box when I give it focus and press a key. I'm getting the

Answer 1

Update
As stripe creates elements dynamically, you have to adjust its height and padding. (Found the answer here)

  <div class="form-group">
    <label for="card-element">Credit or debit card</label>
    <div id="card-element" class="form-control" style='height: 2.4em; padding-top: .7em;'>
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>

Original

Removing py-3 (padding) from the placeholder div does the trick.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="mt-4" [formGroup]="paymentForm">
    <div class="row">
        <div class="form-group col-12">
            <label class="control-label">Name on card</label>
            <input placeholder="ex. John Smith" class="form-control" name="nameOnCard" formControlName="nameOnCard">
        </div>
        <div class="form-group col-6">
            <label class="control-label">Card Number</label>
            <div #cardNumber id="cardNumber" class="form-control">1234 1234 1234 1234</div>
        </div>
        <div class="form-group col-3">
            <label class="control-label">Expiration</label>
            <div #cardExpiry class="form-control">MM/YY</div>
        </div>
        <div class="form-group col-3">
            <label class="control-label">Cvc</label>
            <div #cardCvc class="form-control">CVC</div>
        </div>
    </div>
</div>