Grid: have text and image on the same height and vertically aligned

Question

I am trying to rebuild the Twitter sidebar, and while I feel that my content in the grid is aligned, I just can't seem to get the text on the same height as the icon next to it. The first picture shows my sidebar, and the second picture shows the original Twitter sidebar the way it should look:

My Version

Twitter Sidebar(how it's supposed to look like)

I tried multiple options already, but it didn't really work. I don't really want to play around with since I think that's a bit unprofessional in this case. Here's my code snippet:

.leftside_container {
  display: grid;
  grid-template-columns: 270px;
  width: 270px;
  row-gap: 6px;
  background-color: black;
  position: fixed;
  top: 50px;
  left: 17%;
  border-right: 1px solid rgb(65, 65, 65);
}

.leftside_element {
  font-family: Roboto, Arial;
  font-size: 20px;
  color: white;
  padding: 12px 12px;
}

.leftside_icons {
  width: 28px;
  margin-left: 5px;
  padding-right: 10px;
}

<div class="leftside_container">
  <div class="leftside_element">
    <img class="leftside_icons" src="thumbnails/svgexport-2.svg"> Home
  </div>
</div>

Answer 1

Just add display:flex; and align-items:center; to class .leftside_element. Like that

.leftside_element {
  font-family: Roboto, Arial;
  font-size: 20px;
  color: white;
  padding: 12px 12px;
  display:flex; 
  align-items:center;
}

Answer 2

Use flexbox and wrap the text in a div

So try

.leftside_element{
    ... your stuff;
    display: flex;
    align-items: center
    
}