How to fix the input field height between mobile and desktop views

I am working on a project in which the navbar contains a search input field and button to perform the search. In mobile view, this inline form will be inside the toggle section (I don't know if this is the correct term for this, but the search form will appear when the burger icon is clicked). When the screen width is smaller than 575px, the search input field height becomes bigger than the button height.

The following 2 screenshots demonstrate what I am getting: in mobile view

in desktop view

I used bootstrap 5 and font awesome. This is the code I wrote:

<div class="col-xs-3">
          <form class="form-inline my-2 my-lg-0 input-group">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><span class="icon">
                <i class="fas fa-search"></i>
              </span></button>
          </form>
</div>

How can I make the search button and input field have the same height in mobile view?

Solution

The problem is caused by the button top and bottom margins. Using classes my-sm-0 my-2 means that there will be top and bottom margins on mobile only.

Change this...

<button class="btn btn-outline-success my-sm-0 my-2" type="submit">...</button>

...to this.

<button class="btn btn-outline-success" type="submit">...</button>

See the snippet below.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <div class="col-xs-3">
    <form class="form-inline my-2 my-lg-0 input-group">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">
        <span class="icon">
          <i class="fas fa-search"></i>
        </span></button>
    </form>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

</html>