При использовании входных данных из других пакетов, отличных от Bootstrap-vue, отступы влияют

Question

Для внешнего интерфейса моего сайта я использую Bootstrap-Vue для отображения полей ввода.Однако для inpt под названием «Code postal» я использовал пакет «vue-the-mask», и отступы не совпадают.Я думал, что это приспособится само по себе, но это не так.Почему это так?

<div class="row">
    <b-form-group id="adresseecole" label="Adresse" label-for="exampleInput2">
        <b-form-input class="styleInput" id="exampleInput2" v-model="InfoEcole.ECOLE_Adresse1" type="text"  placeholder="Entrer l'adresse">
        </b-form-input>
    </b-form-group>
    <b-form-group id="codepostalEcole" label="Code postal" label-for="exampleInput3">
        <the-mask id="exampleInput3" class="styleInput" mask="A#A #A#" v-model="codePostalEcole" type="text" placeholder="Entrer le code postal" />
        {{ codePostalEcole }}
    </b-form-group>
</div>
<div class="row">
    <b-form-group class="inputWidthleft" id="exampleInputGroup5" label="Ville" label-for="exampleInput5">
        <multiselect v-model="InfoEcole.ECOLE_Ville" :close-on-select="true" placeholder="Sélectionner la ville" :options="ville">
        </multiselect>
    </b-form-group>
    <b-form-group class="inputWidthright" id="exampleInputGroup2" label="Région" label-for="exampleInput2">
        <multiselect v-model="InfoEcole.ECOLE_Region4" :close-on-select="true" placeholder="Sélectionner la région" :options="list">
        </multiselect>
    </b-form-group>
</div>
<div class="row">
    <b-form-group class="inputWidthleft" id="exampleInputGroup2" label="Téléphone" label-for="exampleInput2">
        <b-form-input maxlength="13" class="styleInput" id="exampleInput2" v-model="phoneMasked" placeholder="Entrer le téléphone">
        </b-form-input>
    </b-form-group>
        <b-form-group class="inputWidthright" id="exampleInputGroup2" label="Télécopieur" label-for="exampleInput2">
        <b-form-input maxlength="13" class="styleInput" id="exampleInput2" v-model="telecopieurMasked" type="phone"  placeholder="Entrer le Télécopieur ">
        </b-form-input>
    </b-form-group>
</div>