Элементы ввода, начинающиеся с разных левых и заканчивающиеся одинаковыми правами

Question

Мне нужно, чтобы правые стороны полей ввода были выровнены по ширине div - 10px, но после каждой метки начинался проход.
В идеале просто css.
Если мне нужно, думаю, я мог бы использовать js /vue, чтобы вычислить ширину контейнера и изменить element.style.width ящиков, но я бы предпочел этого избежать.

style="width: 85%;" - это то, что я собираюсь заменить.

<div id="send-to">
    To: <input type="text" id="mail-send" style="width: 85%;">
</div>
<div id="host">
    STMP Host: <input type="text" id="mail-host" style="width: 85%;">
</div>
<div id="port">
    Port: <input type="text" id="mail-port" style="width: 85%;" >
</div>

На скриншоте ширина жестко задана

Answer 1

Вы можете использовать flex для достижения этой цели, см. Пример ниже

.div-wrap{
    display: block;
    width: 85%;
}
.div-flex{
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}
input{
  width: 100%; 
}

<div class="div-wrap">
  <div id="send-to" class="div-flex">
      To: <input type="text" id="mail-send">
  </div>
  <div id="host" class="div-flex">
      STMP Host: <input type="text" id="mail-host">
  </div>
  <div id="port" class="div-flex">
      Port: <input type="text" id="mail-port" >
  </div>
</div>

Answer 2

Я надеюсь, что это то, что вы ожидаете:

.main {
  width: 450px;
  display: flex;
  border: 5px solid black;
  flex-direction: column;
}
.main div {
  width: inherit;
  display: flex;
}
.main div input {
  flex: 1;
}

<div class="main">
  <div id="send-to">
    To: <input type="text" id="mail-send">
  </div>
  <div id="host">
    STMP Host: <input type="text" id="mail-host">
  </div>
  <div id="port">
    Port: <input type="text" id="mail-port">
  </div>
</div>

Answer 3

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

.field-wrapper > div > input{
  display:table-cell;
  width:100%;
}

.field-wrapper > div{
  width:100%;
  display:table;
}

.field-wrapper > div > p{
  display:table-cell;
  width:1px;
  white-space:nowrap;
}
.field-wrapper{
  width:250px;
}

<div class="field-wrapper">
  <div id="send-to">
      <p>To:</p><input type="text" id="mail-send" style="">
  </div>
  <div id="host">
     <p>STMP-Host:</p><input type="text" id="mail-host" style="">
  </div>
  <div id="port">
     <p>Port:</p><input type="text" id="mail-port" >
  </div>
</div>