Как растянуть поля в колонке при разной ширине?

Question

[Pitman77]

Приветствую всех!
Помогите решить проблему. Разметка из трех колонок: 25%, 41.6% и 33.3%.



Во второй колонке нужно растянуть input’ы на 100% по ширине средней колонки, так что бы они по левому и правому краю всегда были ровные на любом разрешении экрана. С полем 1 и 8 проблем нет, нужно сделать резиновым поле 4 и 7.
Поле 2 и 5: width: 72px; display: inline;
Поле 3 и 6: width: 52px; display: inline;
Их хотелось бы оставить с фиксированной шириной.

А вот поле 4 и 7 растянуть хотелось бы растянуть по правой границе второй колонки без фиксированной ширины. Все, что пробовал либо тянет верстку, либо поля 4 и 7 просто сваливаются вниз.

.col-lg-5 {
width: 41.66666667%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

<div class="row">
<div class="col-lg-3>
Телефон:
</div>
<div class="col-lg-5">
<input size="35" name="other9" id="input_extrafl9" class="input_extrafl" value="" maxlength="255" type="text"> 
<input size="35" name="other10" id="input_extrafl10" class="input_extrafl" value="" maxlength="255" type="text"> 
<input id="bdF19" class="manFlOth5" name="other5" maxlength="100" size="35" type="text">
</div>
</div>

Answer 1

[Андрей]

Вся проблема в их отступах которые даются при display: inline/inline-block;
Если задать всем трем инпутам box-sizing: border-box, float: left и нужные значения длины и отступов, то длина третьего это width: calc(100% - (сумма двух длин и отступов двух инпутов слева))
тип того:
https://jsfiddle.net/0qweqq0t/

Comments

[Pitman77]

Большое спасибо за помощь!!! Ваше решение идеально подошло!

Answer 2

[Владимир]

А если обернуть их в div, задать display:inline-block (вариант: float:left) и задать ширину в процентах? Пробовать сейчас не имею возможности, так что это просто предположения.

Answer 3

[Андрей Верх]

Всё это просто делается через flexbox