cute css trick for formatting footnotes

One challenge when you have content loaded from JSON translation files - in React, there might not be a graceful way of allowing <em> and <b> and other purely stylistic markup; you either have to hack something to wrangle the structure or you use dangerouslySetInnerHTML and hope that your code is never used with unsanitized user data.

A late addition to the design was footnotes; because the footnote also needed to be separate markup (for coloring purposes) my code (with asterisk as a boolean was like

    <headercardfooter href="{url}">
      {asterisk &amp;&amp; <asterisk>*&nbsp;</asterisk>}
      {text}
    </headercardfooter>

which along with some coloring for asterisk (we're using styled components) got me to:

But that's not great. But the trick was as simple as changing the headercardfooter from display:block; to display:flex; - all the defaults for flexbox are such that you get 

practically for free!