How can I align the input-group element and button to the right without specifying fixed widths or column sizes? Specifically, I want the col containing the button to only occupy the width of the button itself, with the remaining col being used by the input elements.
Is there a way to achieve this layout using Bootstrap classes?
<div class="container">
<div class="row">
<div class="col-4">
<input class="form-control border-basic" id="searchInput" type="text" placeholder="Search Reports..">
</div>
<div class="col-8">
<form class="float-right" method="post" style="width:50%">
<div class="form-group row text-right">
<div class="col">
<div class="input-group" style="text-align:right;">
<input class="form-control border-info" type="text" name="name" placeholder="Enter here" required>
<div class="input-group-append">
<button class="btn btn-outline-danger border-info" type="button" title="Clear">
<i class="fa fa-close fa-lg"></i>
</button>
</div>
</div>
</div>
<div class="col">
<button class="btn btn-danger" type="submit" title="Add"><i class="fa fa-plus-circle fa-lg"></i> Create</button>
</div>
</div>
</form>
</div>
</div>
</div>