定位另一个div而不破坏垂直对齐

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>