use flexbox in ProductMenu and prevent tag from getting truncated

[katydecorah]

This PR adds flexbox to the ProductMenu component, this allows us to move the tag outside of the truncated text.

Large screens

Truncation is happening

Smaller screens

---

@colleenmcginnis what do you think of this workaround?

---

How to test

QA checklist

• No errors logged to console.
• Accessibility score in Chrome DevTools Audit/Lighthouse is 100% with Lighthouse version: #.#.#.
• Component is accessible at mobile-size viewport.
• Component is accessible at tablet-size viewport.
• Component is accessible at laptop-size viewport.
• Component is accessible at big-monitor-size viewport.
• Create a PR in a site repo, copy the component, and test it. Push to staging and let the reviewer know they can also test the component there.

Open the test cases app locally on:

• Chrome, no errors logged to console.
• Firefox, no errors logged to console.
• Safari, no errors logged to console.
• Edge, no errors logged to console.
• IE11, no errors logged to console.
• Mobile Safari, no errors logged to console.
• Android Chrome, no errors logged to console.

[colleenmcginnis]

I think this is a good solution. Thanks @katydecorah!

At some point (maybe amidst the info architecture work) we should probably reevaluate whether we should be truncating the product name at all, but that is a problem for another day!