JSFiddle - React, Tailwind, and code Playground

HTML

<div class="expression">
Sample Text 
<span class='supsub'>
  <sup class='superscript'>Sup</sup>
  <sub class='subscript'>Sub</sub>
</span>
</div>

CSS

.expression{
  display:flex;
  align-items: center;
}
.supsub {
  display: flex;
  flex-direction: column;
  margin-left: 2px;
  }
.subscript {
  color: green; 
  display:flex;
  }
  
.superscript {
  color: red; 
  display:flex; 
  }