Как я могу сделать элемент в Grow, если в нем нет других братьев и сестер?

Question

Рассмотрим этот код:

https://codepen.io/Kezhich/pen/pXNevv

Вопрос: Как я могу увеличить группу ввода до полной ширины контейнера, если внутри нет круглой кнопки?

Уже пробовал flex-grow.Не работал для меня.

.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>

Answer 1

Удаление классов col- * и настройка свойств flex-grow для обоих потомков работали нормально!