垂直居中文本：锚点链接中大字体旁边的标签标签

Question

我希望垂直居中并尝试使用Stackoverflow板上的不同解决方案。 （vertical-align: middle，line-height，Flexbox ...）

但在我的情况下，我试过的不是一个人的作品。 （例如，使用Flexbox时，右侧的标签不会居中于第二行，而是居中于第一行和第二行之间。）

在此示例中，左侧（八月）和右侧（月）的大锚文本应垂直对齐：

左侧：实际状态（月份和标签未真正居中）•右侧：所需结果

如何在链接中的较大文字旁边垂直居中span标记？

示例代码

https://codepen.io/anon/pen/rwZmyz

body {
  font-family: Verdana;
  font-size: 48px;
}

a {
  text-decoration: none;
}

ul {
  border: 1px solid black;
  margin: 30px auto;
  padding: 0;
  list-style: none;
  width: 280px;
}

.auto-suggest a {
  background: #eee;
  display: block;
  color: #666;
}

.auto-suggest li:not(:last-child) {
  border-bottom: 1px solid black;
}

.auto-suggest-label {
  border: 1px dotted red;
  /* display: inline-block; */
  font-size: 13px;
  font-weight: 700;
  /* height: 100%; */
  text-transform: uppercase;
  vertical-align: middle;
}

.auto-suggest [data-label="month"] {
  color: #5BBDC6;
}

.auto-suggest [data-label="season"] {
  color: #ffc54a;
}

<ul class="auto-suggest">
  <li>
    <a href="#">August <span class="auto-suggest-label" data-label="month">Month</span></a>
  </li>
  <li>
    <a href="#">Spring <span class="auto-suggest-label" data-label="season">Season</span></a>
  </li>
  <li>
    <a href="#">Here two lines <span class="auto-suggest-label" data-label="season">Season</span></a>
  </li>
</ul>