Why is this text not aligned vertically to my CSS grid row?

My website will have information on the temperature and I am hoping to have a read out of temperature followed by a degree sign and either 'C' or 'F'. There is other information on the page about the weather, so I am using CSS grid to layout the page and break all of the sections up. When I make the degree note font size smaller, the degree moves higher on the page. I would like it to be aligned with the temperature value, but I can't figure out whats going on in the page. Any assistance would be amazing.

Photograph of the problematic text:

.wrapper {
  display: grid;
  grid-template-rows: 200px 100px;
  padding-bottom: 2.5em;
}

.temp {
  display: grid;
  grid-template-columns: 150px 150px;
  padding: none;
  font-size: 3em;
  align-content: center;
  justify-content: center;
}

.degree-note {
  font-size: 30px;
  align-content: center;
}

<div class="wrapper"><img class='loading-text' src='img/weather-app-loading.png'><div class='temp'><h2 class='temp-degree'>34</h2><h2 class='degree-note'>&deg C</h2></div></div>