JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<div class="wrapper">
  <div class="content">

    <h2>Unfortunately it doesn't work with multline content</h2>
    <p>Pellentesque ultrices sed quam pellentesque, eu ultricies nulla semper. <label for="pretty" class="accent" data-meta="Unfortunately it is aligned with the last line of said span.">Etiam lsaddsasadsda asd sda sd a sdaeo ligula, laoreet eget urna et, dignissim facilisis nisi asddsadsa sa as sas as dasd asd ads a anteasdasddsa asdsadds asd sdasd s asd dsasd ads  laoreet eget urna et, dignissim facilisis nisi asddsadsa sa as sas as dasd asd ads a anteasdasddsa asdsadds asd sdasd s asd dsasd ads.</label> Duis gravida lectus tellus, sed rutrum nisi ultricies a. Aliquam pellentesque ante at ipsum convallis porta.</p>
    
  </div>
</div>

SCSS

label
{
    color:red !important;
}

/* Basic typo (not problem related) */
body {
  font-family: Georgia, serif;
  font-size: 82.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%;
}

.accent {
  color: cornflowerblue;

  &:after {
    position: absolute;
    right: 0;
    width: 31.035%;
    /*transform:translateY(-100%)*/
       
    position: absolute;
    right: 0;
    width: 31.035%;
    /*transform:translateY(-100%)*/
	color:#fff;
	background:#333;
	background:rgba(51,51,51,0.75);
	padding:5px;
	position:absolute;
    right:0;
    bottom:auto;
	opacity:1;
	white-space:nowrap;
	-webkit-transition:0.25s linear opacity;
        }
  &:after {
    content: attr(data-meta);
  }
}

.accent--before {
  &:before {
    content: attr(data-meta);
  }
  &:after {
    content: none;
  }
}

.accent--relative {
  position: relative;
  display: inline-block;
  &:after {
    top: 0;
    left: 111.11%;
    width: 50%;
  }
}