<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />

<div class="flex">
  <div>
    <i class="far fa-heart"></i>
    <span class="ratio">12</span>
  </div>
  <div>
    <i class="fas fa-cart-arrow-down"></i>
    <span class="ratio">4</span>
    <p class="purchase">
      <span>2000 &#8381;</span>
      <span>ваших покупок</span>
    </p>
  </div>
</div>

.flex {
  display: flex;
  padding-top: 6px;
}

.flex div {
  position: relative;
}

.flex div:not(:first-child) {
  margin-left: 30px;
}

.flex div i {
  font-size: 50px;
}

.ratio {
  position: absolute;
  top: -12px;
  left: 50%;
  background: red;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  padding: 4px;
}

.purchase {
  position: absolute;
  left: calc(100% + 10px);
  top: -12px;
  white-space: nowrap;
}

.purchase span {
  display: block;
  font-family: sans-serif;
}

.purchase span:nth-child(2) {
  font-size: 14px;
}