Using flexbox how to make the width of the cells as in the table?

Question

css

Good afternoon. I needed to flip the table (I used display: table, table-row and table-cell) to display: flex. And then a problem arose - I like the table, because the browser looks at all the rows of the table and adjusts the width of the cells of each row as needed, i.e. aligns content across columns. And if you use flex, then each line turns out to align its inner blocks independently of the other line - and this is clearly not a table.
Alternatively, width can be set as a percentage and min-width and max-width as pixels. Become much better. Already it looks like a table, but still there is no main advantage of the table - the selection of the cell width and the allocation of empty space based on the content (!), And not just rigid width frames. Maybe I missed something or didn't mark it correctly?
Link to the sandbox: codepen.io/dimm/pen/VaOXPG
Thanks.

Answer 1

If we make a table through display: flex, then the flow should be in columns. Those. column for the first column column for the second and third. Then you get what you want to do.