Aligning font-variant: smallcaps with other elements

Question

I am having a bit of an issue with aligning elements vertically, as can be seen in the picture:

Namely, when font-variant: smallcaps is in effect, the span containing the text is no longer "centered" with the icon beside it, this is more apparent the bigger the "font" due to icon being a sized by the font-size.

I tried converting the span to a display:block element but couldn't manage to get it to work with vertical-align: middle, i tried turning it into display: flex and using align-items: center. No success, seems that only the display is "out of touch" while internally the text is properly sized. How would you fix this?

Fiddle: https://jsfiddle.net/1nzhgymf/

.menu-item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;

  width: 100%;
  height: 2.8em;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Roboto;
  font-size: 20px;

  flex-grow: 0;
  flex-shrink: 0;

  padding: 0.4em;
}

 .icon {
    min-width: 1em;
    min-height: 1em;
    background: red;
      margin-right: 0.4em;
  }

<div>
  <a class="menu-item">
    <div class="icon"></div>
    <span>Example</span>
  </a>
  <a class="menu-item" style="font-variant: all-small-caps">
    <div class="icon"></div>
    <span>Example</span>
  </a>
</div>

Answer 1

The initial attempt at an answer here incorrectly concluded that the em size of a font was affected by all-small-caps in CSS font-variant. This is not so (and certainly should not be, an em being fixed for a font/font size) but I keep this answer here rather than deleting it because the questioner has made some useful comments.

Here is a further attempt at an explanation:

The problem as stated was an issue with aligning elements vertically. An example was given of an all uppercase word appearing to align differently from one which was set at all-small-caps. In the screenshot below you can see variations on this - with a line which is all lowercase or all small caps seeming to be further down than the uppercase example.

In some sense this is true - in the uppercase example the mid line goes through the middle of the uppercase E and X which makes it balanced about the line. In the all-small-caps example though the capitals' centres have dropped below the mid line. The final line in the image shows why this is necessary - mixed text would otherwise be waving up and down.