Inline block in a flexbox in the column direction

css, flexbox, html, vertical-alignment

Solution

I think the best way to go about this is to say which lines you want to take up 100% (in width) and then have everything else just take up one line.

You'll notice I've added `flex-wrap: wrap;` so a new line gets started when needed.

body {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.a,.b,.c,.d,.e {
  height: 50px;
  line-height: 50px;
  border: 1px solid;
  text-align: center;
  flex-grow: 1;
}

.a {
  background: cyan;
}

.b {
  background: yellow;
}

.c {
  background: orange;
}

.d {
  background: gray;
}

.e {
  background: pink;
}

.a,.b {
  width: 100%;
}

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
</div>

EDIT: My answer is very different from the ones above, did I misunderstand the question?

Problem

Original source