I need to arrange a list of people in the following order  

[![enter image description here](https://i.stack.imgur.com/0etl3.png0)](https://i.stack.imgur.com/0etl3.png0)

the green is the director, the blue and gray: people of 2 departments

Constraints: 

* all elements should be of the *same size*, contained in the *same parent* container;
* the table should not contain more than 2 rows;
* the parent width is variable/unknown;
* the fist (green) element is the director;
* the following are:
	+ x elements of the first (blue) department and
	+ y elements of the second (gray) one.

The CodePen is [here](https://codepen.io/serhio/pen/dwOXre)

```css
.container {
  display: table;
  border: 1px solid lightgray;
  width: 220px;}
article { width: 50px; max-height: 50px;min-height: 50px; background: gray; display: inline-block; border: 1px dotted;}
.dir {background: green; display: table-cell;margin-top: auto; margin-bottom: auto;}
.d1 {background: lightblue;}
.d2 {background: lightgray;}
```

```html
<div class="container">
    <article class="dir">lft mid</article>
    <article class="d1">d11</article>
    <article class="d1">d12</article>
    <article class="d1">d13</article>
    <article class="d2">d21</article>
    <article class="d2">d22</article>
</div>
```

Some explanations:  

I have a company director, and commercial and executive staff boxes. The director should head people in the left, vertically centered. commercial people are in the upper line, executive in the bottom one. Boxes should have the same size. Also, as I do an Angular foreach to obtain elements, all boxes should be directly in the "container" parent.