Flex ＋ Card (画像と長さの違う文章 + 短い注釈) の表示方法

<!-- 親要素 -->
<ul class="pf-CardList">
  <!-- 子要素 -->
  <li class="c-CardImageVertical">
    <div class="c-CardImageVertical__ImageWrap">
      <!-- 写真 -->
      <img class="c-CardImageVertical__Image" width="" height="" src="./img/pasta_calbo.jpg" alt="">
      <!-- タグ -->
      <div class="c-CardImageVertical__Tag">
        <span>単品</span>
      </div>
    </div>
    <div class="c-CardImageVertical__Body ">
      <!-- タイトル -->
      <div class="c-CardImageVertical__Title">
        カルボナーラ
      </div>
      <!-- 料理の説明 -->
      <div class="c-CardImageVertical__Note">
        濃厚なクリームチーズとさわやかなブルーベリーソースのハーモニーが楽しめるケーキ
      </div>
      <!-- 値段 -- Target -->
      <div class="c-CardImageVertical__Price">
        1,200円
      </div>
    </div>
  </li>
　<li> 
　==　繰り返し ==
  </li>
</ul>

.pf-CardList {
  display: flex;
}

.c-CardImageVertical {
  display: flex;
  flex-direction: column;
}

.c-CardImageVertical__Body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.c-CardImageVertical__Price {
  margin-top: auto;
}