When an input with a floating label (Bootstrap 5) is inline with other elements, the elements may appear to jump up and down depending on the position of the floating label.
https://i.sstatic.net/kDxBo.gif
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div>
<h3 style="display:inline">Example Header</h3>
<div style="display:inline-block; margin-left:35px" class="form-floating mb-3 mt-3">
<input style="width:auto" type="text" class="form-control" id="email" placeholder="Enter email" name="email">
<label for="email">Email</label>
</div>
<button style="display:inline" type="button" class="btn btn-primary">Press</button>
</div>
I want to keep the input element inline with the button without the button being relative to the floating label.
I've experimented with using position: absolute
on the input, which does solve the issue by making it no longer relative to the inline elements. However, I require a solution that doesn't involve absolute positioning, as I still want the button to be relative to the input, just not to the floating label.