JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8" />
<title>CSS test</title>
<style type="text/css">
.labeled {
  margin-left: 40px;
  position: relative;
}
.labeled::before {
  display: inline-block;
  content: attr(data-label);
  position: absolute;
  width: 40px;
  left: -40px;
  /* How to vertically position so paragraph and label have same baseline? */
}
</style>
</head>
<body>
<p class="labeled" data-label="L">Lorem ipsum<sup>SUPERSCRIPT</sup>
dolor sit amet, consectetur adipiscing elit. Ut cursus sem in nisl
pulvinar porta. Praesent laoreet nisl sit amet sagittis
mollis. Aliquam sit amet erat vitae enim ullamcorper dapibus ut vel
lectus. Maecenas facilisis accumsan diam ut maximus. Suspendisse
potenti. Donec sapien sem, lacinia eu eros vitae, tincidunt congue
leo.</p>
</body>
</html>