Как установить правильную ширину выпадающего списка автозаполнения?

Question

Я работаю над веб-приложением, которое вычисляет подсети предоставленного IP-адреса на основе свойств. У меня есть проблема, у каждого отдельного ввода есть выпадающее автозаполнение с той же шириной, что и сам ввод, все, кроме первого.

Я пытался изменить класс div на col-sm-4,6,8, и у них выпадающий список имеет ту же ширину, что и ввод, но из col-sm-10,12 и т. Д. Он становится меньше. Я также попробовал класс "w-100", но это не помогло вообще.

Ввод с неверной шириной выпадающего списка автозаполнения

<div class="col-sm-12">
        <div class="mat-div">
          <label for="ip_addr" class="mat-label" style="font-size: 1.7em;">Enter the IP address</label>
          <input name="ip" [(ngModel)]="model.ip" type="text" required pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$"
                 class="needs-validation mat-input" id="ip_addr">
        </div>
      </div>

Ввод с правильной шириной выпадающего автозаполнения

<div class="col-sm-6">
          <div class="mat-div">
            <label for="number_of_computers" class="mat-label" style="font-size: 1.1em;">Number of computers</label>
            <input type="number" name="number_of_computers" required [(ngModel)]="model.number_of_computers"
                   class="needs-validation mat-input" id="number_of_computers">
          </div>
        </div>

Я также прилагаю скриншот обоих случаев: Правильная ширина Неправильная ширина