[nailer]

My rule: grid by default

  body,
  nav,
  header,
  article,
  section,
  figure,
  form,
  div,
  header,
  footer,
  button,
  .button {
    display: grid;
  }

.button is gross but included as older Chrome/Edgium have issues using grid/flex on proper buttons.

[KarimDaghari]

nav, figure and button: why wouldn't flex cut it?

[nailer]

because they nearly always might have two dimensions.

Good question. Think of a price button (to choose yearly payment, instead of monthly).

----

$299/year upfront *

Less than $25 a month

cancel anytime

----

* The symbol would be smaller, the number bigger, lined up in a horizontal row.

[KarimDaghari]

I would use: `flex-direction: row`. And use wrap the number and asterisk in a `span` and style them as needed.