I need a solution to display a text input and two buttons side by side. The buttons should take up only the space they require, while the text input should expand to fill the remaining space. It's important to have small margins between these elements, and I'd like to accomplish this using Bootstrap 4 classes.
Initially, I tried using three col-auto divs, but that resulted in the input having a fixed width of approximately 150px:
<!-- Input field - Should be as wide as possible -->
<div class='col-auto'>
<input class='form-control'
type='text'>
</div>
<!-- First button -->
<div class='col-auto'>
<button class='btn btn-primary'>
DO that
</button>
</div>
<!-- Second button -->
<div class='col-auto'>
<button class='btn btn-primary'>
Do that
</button>
</div>
I'm wondering if there is a more elegant way to achieve the layout I desire.