When investigating topic containers for mobile (T303362), we've noticed that the styling of section headings is currently implemented using `display: table` and `display: table-cell`, which makes it difficult to add content associated with the heading that would display on a separate line. It seems like they could be implemented using `display: flex` instead, which was not widely supported by browsers when this code was originally written, but it is now. A flexbox version would be easier to maintain in the long term, and it would also allow us to remove some workarounds in VE code (e.g. T202991).
===Testing
This should result in no changes (regressions) to the look and behaviour of section headings on mobile, which usually consist of:
* An expand/collapse icon on the left (^/v), clicking on this or the heading should toggle the section
* The section title
* And section edit link (pencil icon), right aligned, which launches an editor at that section
Test on a few mobile devices (Android/iOS)
Scenarios to test:
* Normal page view
* Normal page view with non-collapsible sections (e.g. wrapped in <div>)
* Normal page view with non-editable sections (e.g. fully protected)
* Normal page view loading with slow connection (no content shifts/jumps)
* No-JS page view
* Visual editor (headings look the same as view mode, togglers and edit links are hidden)
* Editor loading animation (smooth transition from view to visual edit mode)
* Wikitext editor preview (togglers are hidden)
* Desktop Minerva (togglers are hidden, multiple edit links appear correctly)
* Other skins on mobile (sections are collapsible, nothing looks wildly broken)
* No regressions related to these issues: T106347 T202991 T229744