对于flexbox对齐的中心，为什么孩子们也不是垂直对齐的？

Question

请参阅以下内容：

.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>

请参阅代码段，为什么标签也不垂直对齐div的垂直中心？我的目标是将Logo和Tag都垂直对齐在黄色div的中心。

感谢您的任何提示。