html - How to have social media handle to the right side of icon?

Question

Pretty new to working with CSS and was trying to figure out ideas of what to do to have the span, which is acting the as the social media handle/label associated with the icon to be to the right side of the social media icon? I am trying to have the handle to be on the right side of the icon and to be in the center vertically as well if that makes sense. I tried playing around with the float attribute with the span, but that did not help much. My code pen is a very small snippet of what rest of the code is on purpose to achieve the small task I have in mind. I am keeping the social media icon(s) to be vertically aligned on purpose.

.pic {
  display: flex;
  align-items: center;
  width: 30px;
  height: 30px;
}

<div>
  <a href="https://www.facebook.com/joebiden/" >
    <img class="pic" src="https://i.pinimg.com/originals/b7/63/69/b763699fd1fa3bfb374442593ae642e1.png"/> 
    <span>Facebook Handle </span>
  </a>
</div>

question from:https://stackoverflow.com/questions/65840816/how-to-have-social-media-handle-to-the-right-side-of-icon

Answer 1

You should use display: flex; with row direction on the container of the two items (img and span).

Here's the code piece you can add to your stylesheet

a {
    display: flex;
    flex-direction: row;
    align-items: center;
}