With flexbox aligned center, why aren't children also aligned vertically centered?

Question

See the following:

.header {
  background-color: black; 
  height: 100px;
  min-height: 100px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
}

.itemLeft {
  background-color: yellow;
  box-sizing: border-box;
  width: 50%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.logo {
  font-size: 32px;
  background: green;
}

small {
  background: Red;
}

.itemRight {
  background-color: darkgoldenrod;
  box-sizing: border-box;
  width: 50%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 18px;
  padding-bottom: 18px;
}

<div class="header">  
  <div class="itemLeft">
    <a class="logo">Logo</a>
    <small>tag</small>
  </div>
  <div class="itemRight">Menu</div>
</div>

See the code snippet, why isn't tag also being vertically aligned to the vertical center of the div? My goal is for Logo and Tag to both be vertically aligned in the center of the yellow div.

Thanks for any tips.