I am trying to vertically center align an image with text using inline-block. I am doing this because I want the icon to always wrap with the first line of text as the text wraps to a new line as opposed to to it center aligning with the whole block.

The problem I’m running into is that when everything is on a single line, vertical-align: middle doesn’t seem to vertically center images in the same fashion that display: flex and align-items: center does. As a result this ends up with things looking inconsistent when I need to interchange between the two. I’ve attached screenshots, as you can see the top of the first letter is slightly different between the two.

Is there a way to do what the first example is doing with flex box instead so I can have things vertically center in the same nature? Right now they are slightly off if you compare the two closely.

.example-a {
  display: inline-block;
  padding-bottom: 24px;

}

.example-a img {
  vertical-align: middle;
}

img {
  height: auto;
  width: 42px;
}

.example-b {
  display: flex;
  align-items: center;
  gap: 4px;
}

<div class="example-a">
  <img src="https://github.githubassets.com/assets/starstruck-default--light-a594e2a027e0.png">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et molestie nulla. Ut ut augue id mi porttitor scelerisque.</span>
</div>

<div class="example-b">
  <img src="https://github.githubassets.com/assets/starstruck-default--light-a594e2a027e0.png">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et molestie nulla. Ut ut augue id mi porttitor scelerisque.</span>
</div>