Pure CSS float с выравниванием и вложенными структурами

Question

У нас есть HTML-шаблон, сгенерированный Javascript, и для него есть несколько макетов CSS, из которых мы генерируем PDF.

Желаемый вывод:

• the same color blocks are siblings,
• the big purple one contains the red ones.

the content in them are dynamic, so they can shrink and grow in height.

position: absolute is out of the question, because in that way i can never have the parent container know the absolute element height. floats maybe?

created a pen for it: https://codepen.io/anon/pen/PaGEzN

.container {
  height: 500px;
  margin: 0 auto;
  width: 75%;
}

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

.header {
  display: inline-block;
  order: 2;
}

.details {
  display: flex;
}

.seller {
  height: fit-content;
}

<div class="container">
  <div class="container-top">
    <div class="header">
      header
    </div>
    <div class="details">
      <div class="seller">
        <p>seller details</p>
        <p>seller details</p>
      </div>
      <div class="client">
        <p>client details</p>
        <p>client details</p>
        <p>client details</p>
      </div>
    </div>
  </div>
  <div class="container-bottom">
    lorem ipsum
  </div>
</div>