如何使用html或CSS将我的文本与我的星级对齐？

<div class="rating">
  <span class="text">我的文本</span>
  <div class="stars">
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
  </div>
</div>

.rating {
  display: flex;
  align-items: center;
}

.text {
  margin-right: 10px;
}

.stars {
  display: inline-block;
}

.star {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: yellow;
  margin-right: 5px;
}