How to typeset similar text in cards correctly?

Question

css

Answer 1

You can use pseudo-elements:
https://codepen.io/wutwutwut/pen/WNjpbXb

Answer 2

https://jsfiddle.net/vkorotenko/zapn0duc/
Something like this

Answer 3

You can do something like this, play only with top and margin, well, set the sizes for the fonts accordingly

<div class="price">
    <sup>$</sup> 00 <sub>per month</sub>
</div>

.price {
  display: flex; align-items: baseline; justify-content: center;
}
.price sup {
  position: relative; top: -10px; margin-right: 2px;
}
.price sub {
  position: relative; top: -2px; margin-left: 5px;
}