Here is the code snippet for your reference:
https://codepen.io/Kezhich/pen/pXNevv
Inquiry: How can I ensure that the input-group expands to the full width of the container when there is no round-button present?
I have attempted using flex-grow but it did not yield the desired result.
.btn_circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
min-width: 30px;
min-height: 30px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron shadow py-2 px-3">
<div class="row col-12 px-0 mb-2">
<div class="col-11">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text form__prepend">
<b>№1</b>
</span>
</div>
<input type="text" class="form-control form-control-sm" placeholder="blah blah blah" />
</div>
</div>
<div class="col-1 pr-0 d-flex justify-content-end form__delivery__delete">
<button class="btn btn-primary btn_circle">
<i class="fas fa-times"></i>
</button>
</div>
</div>
</div>