Use flex positioning for card headings

[chihuahua]

In comments within #430, @wchargin proposed that we use flex positioning
to position elements within the header. That seems like a robust idea.

This PR thus uses @wchargin's proposed method to implement @jart's
original, space-efficient design that makes use of both the left and
right sides of headings (if space is available).

Having that idea lingering at the end of a closed PR seemed a bit precipitous, so I just went ahead and implemented.

This PR fixes the layout issues brought up in #430. This change also fixes #421.

[wchargin]

Cool, this looks nice to me.

(Why is this tagged plugin:images and plugin:audio? Shouldn't it be core:frontend?)

[wchargin]

I'd prefer if you could note in the commit description why this change was made—i.e., explicitly write (inline in the commit message) the bug that it fixes. (Reason—people abiding by the Chesterton's fence principle might unsoundly revert this if they infer, from the current commit message, that this is just an implementation change without user-facing changes.)

[chihuahua]

Thanks! I like that principle. It's easy for a fence to be removed if its cause for being there isn't clear. How about now?

My latest commit changes a few things to accommodate either (or both) long run names or long tag names.

We use flex-wrap: wrap; to force flex children to wrap to the next line.

[wchargin]

(Right: my original example contained flex-wrap: wrap for this reason. But you're not missing anything else :-) )

Fixing #421 here is fine with me.

[jart]

I'm late to this PR but I just want to say that you really managed to perfect what I was going after. I'm very happy with this change.

[wchargin]

Cool, glad to hear it. Thanks!

[chihuahua]

Thanks! :)

[ro3c]

Thanks!