Html 网格项中的文本对齐问题

我有一个文本问题，我需要分开文本和货币部分，还必须对齐文本，这样每当我在较小的文本中查看货币部分到下一行

。冒险卡{
显示器：flex；
柔性包装：包装；
宽度：100%；
高度：自动；
证明内容：中心；
对齐项目：居中；
边界半径：10px 10px 10px 10px；
位置：相对位置；
线高：1.7；
}
.冒险卡{
/*TODO:模块\u冒险\u网格*/
/*1.填写所需的属性*/
宽度：100%；
高度：25vh；
边界半径：10px 10px 0px 0px；
}

滑雪

₹；1900年

树冠

₹；1800

海滩度假酒店
₹；2200

请参考下面添加的我的代码，如果有任何疑问，请告诉我

<div class="adventure-card  border bg-light">
  <div class="adventure-card img-responsive">
    <img src="/assets/adventures/resort.jpg" alt="tower.jpg" />
  </div>         
  <div class="text-center">
    <h5 mb-0>resort</h5>
    <span>&#8377;1,200</span>
  </div>
</div>

求助
₹1,200

使用以下方法：

和#8377；1200

在CSS中添加“弹性方向：列；”：

.adventure-card {
  display:flex;
  flex-wrap: wrap;
  width: 100%;
  height:auto;
  justify-content:center;
  align-items: center;
  border-radius: 10px 10px 10px 10px;
  position:relative;
  line-height: 1.7;
  flex-direction: column;
}