How can I fix the alignment of my inline-flex icons?

November 1, 2022

I’m hoping there’s just something major I’m missing here with inline-flex.

I’m using display: inline-flex and the order of the 2 items inside of the element change how the element aligns with its siblings.

In this scenario I have 3 anchor tags each with some text and an "icon" element. On the 2nd anchor tag I’ve put the "icon" element as the first child which causes the element to not align with its sibling anchor tags.

.item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: red;
}

<a href="#" class="item">
  item
  <span class="icon"></span>
</a>
<a href="#" class="item">
  <span class="icon"></span>
  item
</a>
<a href="#" class="item">
  item
  <span class="icon"></span>
</a>

Here’s a CodePen that shows the issue:
https://codepen.io/Fernker/pen/BaVjvXB

>Solution :

Here are two options:

Set vertical-align on the .item {} selector; you can use the value bottom, middle, or top… whichever one fits your needs.
Transpose the position of the "item" text and the <span> in your second/middle <a> link.