如何对齐跨度旁边的中心文本？

Question

我正在尝试将“每月”垂直对齐价格“$29”，就像 picture.You 可以帮助我修复我的代码或给我一种更适合我的新方法。

这就是我想要的。

这就是我的

这是我的 HTML 代码。

  <div class="deal">
          <span class="price">&dollar;29</span>
          <span class="period">per month</span>
        </div>

和我的 css.

.price {
  font-size: 50px;
}
.monthly {
  color: #d0d3d4;
  vertical-align: middle;
  display: inline-block;
}

Answer 1

CSS

.deal{
  display:flex;
  align-items:center;
}
.period{
  margin-left:0.5rem;
}

jsfiddle

Answer 2

.deal {
display: inline-flex;
align-items: center;
}