Vertical alignment of floating divs

Question

I need to create a line in which three divs are located side by side:

In divs, the middle is always vertically centered, while others are vertically aligned.

I did it with the settings

Container:
display:table
Row:
display:table-row
Cell:
display:table-cell with float:none 

This works fine, but now the requirement is that only the last div should be aligned vertically. (see appendix 2):

In any case, I could not cope with this, since the cell of the display table and the vertical alignment: the upper part in the left and right div does not allow me to vertically align the lower one.

I also tried using the absolute position in the last div, but I cannot know if the height of the variable div is greater than the left or right div

thank you for your help!

Answer 1

flexbox

* {
  box-sizing: border-box;
}
.wrap {
  width: 80%;
  margin: 5vh auto;
  border: 1px solid grey;
  display: flex;
}
.col {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1px solid green;
  padding: 1em;
  margin: 1em;
}
.left,
.right {
  flex: 2;
  /* just a number...means they are twice as wide as the middle */
}
.middle {
  justify-content: center;
}
header {
  flex: 0 0 25px;
  background: red;
  margin-bottom: 1em;
}
nav {
  flex: 0 0 35px;
  background: blue;
  margin-bottom: 1em;
}
.content {
  flex: 0 0 auto;
  background: orange;
  margin-bottom: 1em;
}
footer {
  height: 50px;
  background: green;
  width: 50px;
  align-self: flex-end;
  width: 100%;
  margin-top: auto;
}

<div class="wrap">
  <div class="col left">
    <header></header>
    <nav></nav>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate cum magnam maiores unde consequuntur, similique deserunt delectus omnis expedita in, laborum praesentium consequatur
      eius adipisci saepe rerum reprehenderit nostrum temporibus.</div>
    <footer></footer>
  </div>
  <div class="col middle">
    <div class="content">Lorem ipsum dolor sit amet.</div>
  </div>
  <div class="col right">
    <header></header>
    <nav></nav>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, modi!</div>
    <footer></footer>
  </div>
</div>

Hide result

Answer 2

flexbox: http://codepen.io/pjetr/pen/KpYzqj

div { display: flex; }
/* I was required to add some code, to accompany the codepen link :) */

: http://caniuse.com/#feat=flexbox