JSFiddle - React, Tailwind, and code Playground

HTML

<p>
Можно ли с помощью более-менее простой разметки HTML пометить некоторые слова или словосочетания <span class="bordered">рамками<span class="comment">это рамка это рамка это рамка это рамка это рамка </span></span> и сопутствующими комментариями? Например так, как это сделано здесь, на картинке. <span class="bordered">Не уверен, что это возможно<span class="comment">это тоже рамка</span></span>, но ведь хочется.
</p>

CSS

.bordered {
 /* white-space: nowrap;*/
  display: inline-block;
  position:relative;
  border: 1px solid green;
  vertical-align:top;
}
.bordered .comment {
  display: block;
  width: 100%;
  white-space: normal;
  font-size: 10%;
  text-align:center;
}