'Button was not aligned properly in firefox

app.component.html:

  <div class="input-group col-12 d-flex align-items-baseline pb-3">
  <p class="mb-0 pb-3 col-12">Check....</p>

  <input type="url" class="form-control" id="validationCustomUsername" placeholder="Enter your Target Url"
         [(ngModel)]="domainUrl"
         aria-label="Large" aria-describedby="inputGroup-sizing-sm" (keyup)="onChange()">
  <div class="input-group-prepend">
    <button class="input-group-text" id="inputGroup-sizing-lg" (click)="scan()"
            [disabled]="!domainUrl || !domainUrl.length">{{submitBtntext}}
    </button>
  </div>
  </div>

I have input and button it looks good in chrome but it was not aligned correctly in firefox. chromeFirefox



Solution 1:[1]

You can use specific CSS for firefox by using

@-moz-document url-prefix() {
  ###your css
}

read firefox documentation from here for more info. https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ManulMax