I've been searching and experimenting for hours, but I can't seem to make it work.
In my "inline-form," I have a button on the left, an input field in the middle, and a button on the right within a navbar. Everything displays correctly when the navbar is not collapsed.
However, when I collapse the menu, line breaks appear near each button, causing them to not align in a single line as I intended.
Here is how it appears in the navbar
And this is how it looks in the collapsed menu
Edit: I discovered that this issue only arises at the "sm" breakpoint when the "input-group" receives a width of 100%.
This is the code I am using:
<nav class="navbar navbar-expand-md navbar-dark bg-hv-dark-green sticky-top">
<a class="navbar-brand h1 mb-0 mr-5" href="/">
<img alt="" class="d-inline-block mr-1" height="35" src="img/brand.svg" />
<span class="align-bottom">PAGE TITLE</span>
</a>
<button class="navbar-toggler" data-target="#navbarContent" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<div class="form-inline ml-auto">
<button class="btn btn-danger mr-2" onclick="clear()" title="clear" type="button">
<span class="fas fa-user-slash fa-fw"></span>
</button>
<div class="input-group my-2">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fas fa-money-bill-wave"></span>
</span>
</div>
<input class="form-control text-right" id="total" readonly="readonly" type="number" value="0.00" />
<div class="input-group-append">
<span class="input-group-text">
<span class="fas fa-euro-sign"></span>
</span>
</div>
</div>
<button class="btn btn-warning ml-md-2" onclick="save()" title="save" type="button">
<span class="fas fa-save fa-fw"></span>
</button>
</div>
</div>
</nav>