Inline Form Input and Submit Button Misaligned at Screen Widths < 576 px - forms

Question

I'm using Bootstrap 4.2.1 and I have an inline form that displays perfectly at viewport widths > 575 px:
However, at viewport widths < 576 px, the form submit button becomes misaligned, dropping slightly:
I've replicated the problem here: https://www.codeply.com/go/hW1xZkJXQ9
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="Email">Email address</label>
<input type="email" class="form-control mr-2" id="Email" placeholder="user#gmail.com">
</div>
<button class="btn btn-primary" type="submit">Add</button>
</form>
</div>
</div>
Any ideas why this happens at smaller screen widths?

Answer 1

Here's what I ended up doing without having to customize the core Bootstrap CSS.
I learned that .form-inline only displays form elements inline at screen widths of at least 576 px. Additionally, I was incorrectly using .form-group along with .form-inline when I should have been using .input-group on the inputs, as was pointed out above. But this still didn't allow me to keep things inline at narrow screen widths of less than 576 px.
Therefore, I abandoned .form-inline altogether and instead used a form grid approach using Bootstrap's built-in grid classes. I used .form-row and treated the inline form elements as normal columns:
Updated Codeply: https://www.codeply.com/go/hwBPwM6qTV
<div class="container">
<form>
<div class="form-row">
<div class="col-8 col-sm-5 col-md-4">
<div class="form-group">
<label class="sr-only" for="Email">Email address</label>
<input type="email" class="form-control" id="Email" name="Email" placeholder="user#gmail.com">
</div>
</div>
<div class="col">
<button class="btn btn-primary" type="submit">Add</button>
</div>
</div> <!-- .form-row -->
</form>
</div>
This keeps everything inline at very narrow screen widths:
Obviously, the columns can be changed to suit the needs of the particular application or preference.

Answer 2

after 576px, form-control remove inline block property, so i will add it for all resolution.
and for btn, i am using mt-n3 mt-sm-0 bootstrap class.
updated codeply: https://www.codeply.com/go/35ENnBhxpA
body {
padding:100px;
}
.form-control {
display: inline-block !important;
width: auto;
vertical-align: middle;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="Email">Email address</label>
<input type="email" class="form-control mr-2" id="Email" placeholder="user#gmail.com">
</div>
<button class="btn btn-primary mt-n3 mt-sm-0" type="submit">Add</button>
</form>
</div>
</div>