tabindex issue

HTML

<script src="https://js.stripe.com/v3"></script>
<form>
  <div class="row">
    <input tabindex="1" placeholder="First name">
    <div id="card" tabindex="3">
      <!-- Stripe Element goes here, with desired tabindex="3" -->
    </div>
  </div>
  <div class="row">
    <input tabindex="2" placeholder="Last name">
    <input tabindex="4" type="submit" value="Submit">
  </div>
</form>

CSS

.row {
  display: flex;
}

.row > input, .row > div {
  width: 200px;
  margin: 4px;
  border: 1px solid #ccc;
}

JavaScript

const stripe = Stripe("pk_xxx");
const elements = stripe.elements();
const card = elements.create("card");
card.mount("#card");