Layout a flex box similar to a table?

If the content you are going to present is of type tabular data, then a table is the proper way.

HTML 5.1 W3C Recommendation, 1 November 2016, 4.9 Tabular data

Given that you can’t, or don’t want to, alter the markup, this can be done using CSS Table, and with that easily swap between any display type such as flex, block, etc., or even float, using media query etc.

I also removed the <div class="line-break"></div> element, since you don’t need, though if it is rendered by a component or similar, leaving it as is won’t cause any problem.

---

If you still need, or have to, use Flexbox, this answer of mine mention the difference between CSS Table and Flexbox on two important features:

• Can flexbox handle varying sizes of columns but consistent row height?

---

Updated, a sample showing some useful Flexbox stuff, with varying width’s and span columns.

Stack snippet – Flexbox (Fiddle demo for IE11)

Show code snippet

---

Stack snippet – CSS Table

Show code snippet