superscript <sup> tag not working when display set to flex

Question

I created this div:

.content {
  display: flex;
}

<div class="content">
  <div>MC</div>
  <div>MR</div>
  <div>M+</div>
  <div>M-</div>
  <div>MS</div>
  <div class="sup">M<sup>-</sup></div>
</div>

and set the display value for class content to flex, but the sup tag won't work anymore! How can I fix this problem for this tag to work?

Answer 1

You simply need to reset the alignment to baseline:

.content {
  display: flex;
  align-items:baseline;
}

<div class="content">
  <div>MC</div>
  <div>MR</div>
  <div>M+</div>
  <div>M-</div>
  <div>MS</div>
  <div class="sup">M<sup>-</sup></div>
</div>