Well, converting <b> and <i> to <strong> and <em> tags is not really semantically correct either.
<i> tag is meant for content that has a different mood from the context, but not really emphasis. For instance, you might want to run italics on words that are taken from another language (most commonly expressions from Latin), which doesn’t carry an emphasis , so <em> would be semantically wrong. In that case it’s recommended to use a lang attribute to the <i> element.
Same thing for a technical term, taxonomy, or any part of a text that normally gets italicized to show a change on the flow, for instance, separate the dialog between characters from the narrator.
It’s also common to use italics on the attribution for a quote, which should be coded as <cite> tags for <q> elements.
Same thing for <b> and <strong>. Sometimes you just want to make text bold without indicating extra “weight” to it.
So rule of thumb: know your text-level semantics, and use <i> and <b> when you want to make something italicized or bold by a semantic reason not covered by other tags.
Now going back to the OP, you might want to check flexbox