如何使用按钮修复响应式输入框？

Question

我无法修复响应式Firefox，但可以使用chrome，我正在使用引导程序框架，请您解决此问题。

.input-group {
        display: flex;
        border: 2px solid #fff;
        border-radius: 12px;
        width: 80%;
        margin: 0 auto;
    }
    .phone-extension {
        color: #fff;
        font-weight: 600;
        margin-right: 8px;
        font-size: 20px;
        margin: 10px;
    }
    #mobile-number {
        color: #505050;
        font-weight: 600;
        font-size: 18px;
        margin: 7px;
    }
    #first-button {
        padding: 14px;
        color: #0b2257;
        font-weight: 600;
        margin: 0px;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div class="input-group md-form form-sm form-2 pl-0">
          <span class="phone-extension">+971</span>
  <input class="form-control my-0 py-1 lime-border" type="number" id="mobile-number" maxlength="9" style="margin: 7px;">
  <div class="input-group-append">
    <span class="input-group-text lime lighten-2"><button class="btn btn-primary" id="first-button" style="" onclick="mobilenumber()">SMS LINK</button></span>
  </div>
</div>