Positioning another div without breaking vertical alignment - html

Question

I had encountered to an interesting CSS challenge. In the following code I was able to vertically aligned the text and input. The part I couldn't manage was, without breaking the vertical alignment (text - input) I need to put footer text under the input.
.container {
width: 300px;
}
.head {
display: inline-block;
vertical-align: middle;
width: 20%;
}
.col {
display: inline-block;
vertical-align: middle;
}
.col input {
width: 100px;
}
<div class="container">
<div class="head">
Text
</div>
<div class="col">
<input type="text" />
</div>
<div class="col">
<input type="text" />
</div>
<div class="head"></div>
<div class="col">
Footer Text
</div>
</div>
<div class="container">
<div class="head">
Three Line Text
</div>
<div class="col">
<input type="text" />
</div>
<div class="col">
<input type="text" />
</div>
<div class="head"></div>
<div class="col">
Footer Text
</div>
</div>
Also, container div height should effect from footer text as well. So using absolute will not work for this case.
I already aware some JavaScript or CSS hack solutions. But for this case, I want to proceed with a proper way. How can we achieve this properly?
UPDATE
I forgot to mention before. Footer text could be multiple lines as well. It should cover both inputs underneath.

Answer 1

Flexbox can do that but it requires restructuring the HTML and altering a class or two...oh, and a pseudo-element.
.container {
width: 300px;
display: flex;
margin: 1em;
border: 1px solid red;
}
.head {
width: 20%;
display: flex;
flex-direction: column;
justify-content: center;
}
.col,
.second {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 .25em;
}
input {
width: 100px;
}
.col:before {
content: "";
height: 1.2em; /* or whatever your line-height is */
}
<div class="container">
<div class="head">
Text
</div>
<div class="col">
<input type="text" />
<div class="foot">
Footer Text
</div>
</div>
<div class="second">
<input type="text" />
</div>
</div>
<div class="container">
<div class="head">
Three Line Text
</div>
<div class="col">
<input type="text" />
<div class="foot">
Footer Text
</div>
</div>
<div class="second">
<input type="text" />
</div>
</div>