Flag with Intl-Tel-Input shifts down when Parsley error div is present

Question

I've got a small but unique error that I've been unable to find elsewhere. Underneath the phone number input that has intl-tel-input is an error message that pops up from Parsley.js. Here is one without the error:

And here is one with the error:

As you can see, when the error div is present, the flag and arrow shift down.

Here's the relevant code:

<div class="col-md-6">
    <input type="tel" class="form-control tc-custom-focus" id="inf_field_Phone1" name="inf_field_Phone1" minlength = '10' maxlength="14" data-parsley-error-message='Must be minimum of 10 digits' data-parsley-trigger='change' data-parsley-required autofocus>
    <input id="hidden-number" name='inf_field_Phone1' type="hidden" name="phone-full">
</div>

<script>
        $("#inf_field_Phone1").intlTelInput({
            utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/9.2.7/js/utils.js'
        });
        $("#become-partner-form").submit(function() {
            $("#hidden-number").val($("#inf_field_Phone1").intlTelInput("getNumber"));
          // console.log($('#hidden-number').val());
        });
    </script>

It appears that the size of div.selected-flag is changing in size to 38x55 from 38x36? If there's any code I forgot to include, please let me know. Any help would be much appreciated!

Answer 1

figured it out! added a height to .selected-flag as such:

.intl-tel-input.allow-dropdown .selected-flag, .intl-tel-input.separate-dial-code .selected-flag {
height: 2em !important;
}