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 elit.asdasdasdasdasdasdasdasasdasdasdasddasdasdasdasdasdasdasdasdasdaasdasdasdsdasdasdasdasdasasdasdasdasdasdasdasdasdasddasdasdasdasdasdasdasdaasdasdasdasdasdsd <span class="accent" data-meta="This content should align with the top of the span in which it is defined.">Cras ut nisl euismod</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::before{
    position: absolute;
    width: 100%; /* you need to set width to 100% of the parent span, otherwise it's gonna be too narrow */
    content: "Unfortunately \A it is aligned with \A the last line of said span."; /* you need to input content directly here, by using an escape character "\A" you set line breaks. */
    white-space: pre; /* and this is important for line breaks inside the css content to work */
    right: -70%;
}