Как прикрыть поле ввода для остальной части родительского div

Question

Пожалуйста, смотрите прикрепленное изображение ниже:

div: a является родительским div, ширина которого установлена ​​на 100%, поэтому независимо от ширина устройства (ПК / моб.) должна увеличиваться до ширины экрана устройства.

div: b для ширины метки ввода. Этот div тоже можно опустить, но я бы хотел оставить его, и его ширина установлена ​​на auto, чтобы он мог быть широким в соответствии с шириной текста метки.

Я хотел бы установить ширину поле ввода таким образом, чтобы оно могло охватить оставшуюся часть родительского пространства div (div: a).

Оба div: b и div: ba устанавливаются как inline: block. Я не хочу устанавливать какую-либо фиксированную ширину для любого из трех элементов div, поскольку я хочу сделать этот макет гибким для любого экрана устройства (p c или мобильного экрана различной ширины).

Вот css и html код div:

    div.a{
    width: 100%;
    border: 1px solid red;
    }
    div.b {
      display: inline-block;
      width: auto;
      height: 100px;
      padding: 5px;
      border: 1px solid blue;    
      background-color: yellow; 
    }
    div.ba {
      display: inline-block;
      height: 100px;
      padding: 5px;
      border: 1px solid blue;    
      background-color: yellow; 
    }
<div class="a"><div class="b">Name:</div><div class="ba"><input type="text" /></ba></div>

Обратите внимание, что под этим полем ввода (имя) также будут другие поля, так как этот макет будет использоваться для создания формы ввода пользователя. .

Буду признателен за любую помощь в автоматическом расширении div: ba.

С уважением, mamun