Currently, I am working on a project that involves implementing a search input field and button within the navbar. In the mobile view, this form will be nested inside the toggle section (I'm not entirely sure if this is the correct term, but essentially the search form will slide out when the burger icon is clicked). One issue I'm facing is that when the screen width is less than 575px, the height of the search input field exceeds that of the button.
I have attached two screenshots to illustrate the problem: mobile view
To address this issue, I utilized bootstrap 5 and font awesome icons. Below is the code snippet in question:
<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>
My main objective now is to ensure that the search button and input field have consistent heights in the mobile view. Any suggestions on how to achieve this?