How to stretch fields in a column with different widths?

Question

css

Welcome all!
Help solve the problem. Three-column layout: 25%, 41.6% and 33.3%.

In the second column, you need to stretch the inputs by 100% to the width of the middle column, so that they are always even on the left and right edges at any screen resolution. There are no problems with field 1 and 8, you need to make the field 4 and 7 rubber.
Field 2 and 5: width: 72px; display: inline;
Margin 3 and 6: width: 52px; display: inline;
I would like to leave them with a fixed width.
But I would like to stretch the field 4 and 7 along the right border of the second column without a fixed width. Everything that I tried either pulls the layout, or fields 4 and 7 just fall down.

.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

The whole problem is their indents, which are given when display: inline/inline-block;
If you set all three inputs box-sizing: border-box, float: left and the desired length and padding, then the length of the third is width: calc(100% - (the sum of the two lengths and padding of the two inputs on the left))
type of that:
https: //jsfiddle.net/0qweqq0t/

Answer 2

And if you wrap them in a div, set display:inline-block (option: float:left) and set the width as a percentage? I don't have the opportunity to try it right now, so it's just speculation.

Answer 3

All this is simply done through flexbox