Currently, the modal form makes use of several techniques (including display: table) to present the modules. The markup for this (in some initial testing I did) seems completely compatible to styling using CSS flex boxes. Once all the layout is using flex boxes, it becomes reasonable to consider many things: 1) In particularly wide screens, we can flow comments on the right-hand side of the bug modal modules. 2) On narrow screens, modules could have their content "stacked" so that instead of two columns, a module takes up only one. This would be nicer for a phone in portrait mode, for instance. But that said, doing this will require a bunch of hours tweaking the CSS rules. This is a bmo-small task, because it's not a good first bug but it would just require sitting down and editing CSS over and over and over. Resources: The file in question is https://github.com/mozilla-bteam/bmo/blob/f5436802e3ff4abb04e43fc22f8c86e549d459b1/extensions/BugModal/web/bug_modal.css This guide I found quite helpful: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I think CSS-Grid be better to use than flexbox since we have rows and columns in each content module. And it's now supported in a large portion of our clients.

(In reply to Emma Humphries ☕️ [:emceeaich] (UTC-8) +needinfo me from comment #1) > I think CSS-Grid be better to use than flexbox since we have rows and > columns in each content module. And it's now supported in a large portion of > our clients. As cool as that would be, flex box has wider support and actually works well with what I want to accomplish now.

Update, all our target browsers support CSS-Grid. Unless it's impossible to file a new bug in a second-support tier browser, okay to do this in Grid.