JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="content">
    <h1>Positioning content in pseudo-elements absolutely relative to inline elements</h1>
    <h2>This technique could be a nice way to offer extra content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing<span class="accent" data-meta="This content should align with the top of the span in which it is defined.">Cras ut nisl euismod and some more words to make it take up more than a single line</span>, molestie arcu eget, suscipit nulla. Nam in aliquet elit. Curabitur mollis dolor diam, ut congue velit elementum ac. Quisque at metus malesuada, egestas justo sit amet, pellentesque ex.</p>
    </div>
</div>

CSS

/* Basic typo (not problem related) */
body {
  font-family: Georgia, serif;
  font-size: 112.5%;
  line-height: 1.167;
  color: #555;
}

h1, h2 {
  color: #222;
}

h1 {
  font-size: 1.167em;
}

h2 {
  font-size: 1em;
}

/* Problem related styles */

.wrapper {
  position: relative;
  width: 580px;
  margin: 2em auto;
}

.content p {
  width: 62.069%;
    word-wrap: break-word; /* add word-wrap to the problematic elements */
}

.accent {
  color: cornflowerblue;
}

.accent::after{
    position: absolute;
    width: 30%;
    content: attr(data-meta);
    right: -50px;
    margin-top: -40px;
}