JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<div class="content">
    <p>1.Pellentesque ultrices sed quam pellentesque, eu ultricies nulla semper.<span class="accent" data-meta="Unfortunately it is aligned with the last line of said span.">2.Etiam leo ligula, laoreet eget urna et, dignissim facilisis nisi ante.</span> 3. Duis gravida lectus tellus, sed rutrum nisi ultricies a. Aliquam pellentesque ante at ipsum convallis porta</p>
</div>

CSS

.content p {
    width: 62.069%;
}
.accent {
}
.accent:after {
    content:attr(data-meta);
    display: block;
    border: solid 1px red;
}
.accent::after {
    content: attr(data-meta);
    position: absolute;
    display:table-row;
    right: 0;
    width: 31.035%;
  }
.accent {
  color: cornflowerblue;

}