How to position element next to relative element

Question

i have navbar looking like this on the markups

i want my Sales text to be aligned with the other menu items, while icon can be different size

any tips how to achieve desired result? i've tried to play with position and float property but had no luck

Answer 1

You can achieve this by adding a max-width and max-height to a div container that surrounds your icon. Something like this:

<h6>
  <div style="height: 64px; width: 64px; max-height: 64px; max-width: 64px">
    <FontAwesomeIcon className="{styles.icon}" icon="{icon}" />
  </div>
  <span className="{styles.text}">{text}</span>
</h6>