Inline block in a flexbox in the column direction

Question

How do I make C, D, E which have a display: inline-block occupy only as much space as they need to fit the text inside of them and can appear next to each another (side by side in a row) in a flexbox which has a flex-direction set to column? Please note that I do not want to wrap C, D, E in a container to get the desired result

body {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
}

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

.c,.d,.e {
  display: inline-block;
}

.a {
  background: cyan;
}

.b {
  background: yellow;
}

.c {
  background: orange;
}

.d {
  background: gray;
}

.e {
  background: pink;
}

<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>

Answer 1

You can do that using flexbox properties itslef - instead of inline-block use align-self: center (or flex-start as you see fit)

.c,.d,.e {
  align-self: center;
}

See demo below:

body {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
}

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

.c,.d,.e {
  align-self: center;
}

.a {
  background: cyan;
}

.b {
  background: yellow;
}

.c {
  background: orange;
}

.d {
  background: gray;
}

.e {
  background: pink;
}

<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>