Understanding why display: inline-block and vertical-align: bottom are necessary in this code

Question

Good morning all! I'm trying to understand someone else's code from a code school assessment. The code is pasted below, as well as the link to a CodePen I drew up with the code (the pasted code came from the CodePen itself, so it omits the main jQuery function and the basic HTML setup). This code shows a navbar for a basic website. When you hover over a navbar link, a pawprint comes from the left and centers under the link, and the link itself rises up in height. Then when you hover over another link, it goes from its current position to the other link which goes up in height, while the first link goes down in height. This is a result of a transition with padding-bottom on the link.

The a tag selector in the CSS has two properties on it, and I don't understand how they are working in this code. I know generally how the properties work and what they're supposed to do, but I don't understand why they are necessary in this code.

The first is display: inline-block. If you leave that out of the code, then the links do not go up when you hover over them. The second is vertical-align: bottom. If you have display: inline-block but do not have vertical-align: bottom, then when you hover over one link they all go up in height.

Can anyone explain that behavior to me and why both are necessary for the desired effect?

The HTML (the person who created the code is not available to explain the code):

<nav>
  <a id="home-link" href="#">Home</a>
  <a id="about-link" href="#">About</a>
  <a id="schedule-link" href="#">Schedule</a>
  <a id="contact-link" href="#">Contact</a>
  <div>
    <i id="paw" class="fas fa-paw"></i>
  </div>
</nav>

The CSS:

html {
  font-size: x-large;
  font-family: Montserrat;
}

nav {
  position: fixed;
  right: 0.5em;
  bottom: 1em;
  font-size: 1.25rem;
  z-index: 2;
}

a {
  margin-right: 0.5em;
  transition: padding-bottom 0.25s;
  display: inline-block;
  text-decoration: none;
  vertical-align: bottom;
  color: orange;
  text-shadow: 0.05em 0.05em 0.025em #404040;
}

a:hover {
  padding-bottom: 0.5em;
}

#paw {
  height: 4vh;
  position: absolute;
  bottom: -0.3em;
  left: -100vw;
  transition: all 1s;
}

The jQuery:

$("nav > a").mouseenter(function () {
  var atag = $(this);
  $("#paw").fadeIn(250);
  var left = atag.position().left;
  var tagWidth = atag.width();
  var blockWidth = $("#paw").width();
  var middle = left + tagWidth / 2 - blockWidth / 2;
  $("#paw").css("left", middle + "px");
});

$("nav").mouseleave(function () {
  $("#paw").fadeOut(250);
});

The CodePen link: CodePen Thank you for any help you can give