Add

  display: flex;
  align-items: center;
  margin: 1px;

To `.container div` to get the vertical centering in the OP comment and the slight border. https://jsfiddle.net/g4qv2dr6/1/

The border still kind of looks better on the table one, it's like the flexbox border is not the same size vertically and horizontally.

Once you add enough text that they need to re-shape, they both behave differently. I kind of like the look of the flexbox one better though.

Table https://jsfiddle.net/gs73eyd5/1/

Flexbox https://jsfiddle.net/g4qv2dr6/2/

Also they both break pretty badly if you put some content so long that would require an automatic line-break (make sure you scroll to the right to see) With flexbox the content overflows outside of the container, but it preserves the sizing of the other elements. Table expands the whole container but in doing so ruins the other two rows.

https://jsfiddle.net/ysu7fgk1/ vs https://jsfiddle.net/q6dcph0x/