If the question is really ‘ How do I get better at layout? ’, I think answer is: Grid Systems in Graphic Design: A Visual Communication Manual by Josef Mülller-Brockmann and here The Elements of Typographic Style by Robert Bringhurst

I'd recommend drawing this out in Illustrator, exporting to SVG, then using SVGOMG to compress before dropping it in your markup.

I've been using Flexbox regularly for about a year and I really don't see any advantages to using floats now that I've got the hang of it and now that it's well supported . I'm surprised they get unexpected results when you have such precise control over flex elements (both on the parent and the children) — even defining widths in pixels if you have to. Could you/your co-worker throw together a quick Codepen to help visualise problem? NB: A) I might be missing something completely B) I'm a Flexbox fanboy.