Как растянуть input[type=text]?

Question

[moem]

Здравствуйте.
Подскажите, пожалуйста, как описать на css размещение на одной строке input[type=text] с изменяемой шириной слева и иконку i.ui-icon с фиксированной шириной справа так, чтобы их общая ширина с учетом отступов не превышала ширину родителя. Ширина родителя может изменяться, вслед за ней должна изменяться ширина input.

<div style="width:200px">
  <input type="text">
  <i class="ui-icon" style="width:16px"></i>
</div>

Спасибо.

Answer 1

[Stalker_RED]

.ui-icon {
  width: 16px;
}
input {
  width: calc(100% - 16px);
}

Comments

[moem]

Спасибо. И не знал, что такой трюк с calc существует.
Какая плашка?

[Stalker_RED]

moem: Синяя вверху страницы тостера. Регулярно появлялась, пока не заполнил.

Answer 2

[chimir]

на флексах https://jsfiddle.net/tk707x97/