Use pixels instead of rem units for focus box-shadow on custom controls so that IE11, Edge, and Win FF screw it up less

Fixes #21135.

There's a height mismatch here because we're setting padding on the labels, while inputs get padding *and* a top+bottom border. This now uses calc to determine the exact height needed to match labels to inputs.

Rather than overriding this just on inline form examples, this should be for all static form controls to match inputs.

fixes broken inline form example mentioned in #21407

This also fixes #21280. Previously, we were using float and clear on the individual controls, but that meant a computer height of `0` for the parent `.custom-controls-stacked`. No more problem after using flexbox though.

- we need to set margin for space between footer buttons as flexbox doesn't render HTML spaces like inline-block does

- flexbox doesn't have collapsing margins or anything, so we hack it with some :not(:first-child) and :not(:last-child) action

updates the dom order in our docs to match (floated content comes first, but no need for that in flexbox)

* [Fix #19849] Tabs are opened even if disabled.

* fix hund code review hints

* rollback hound issues because Travis fails

fixes #21423 by updating docs to mention flex display instead of inline-block; clarifies follow-up text about use of the proper utilities

- better table of contents and overall structure

- clearer examples of modal contents, longer modals, and modal options