JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>Inline HR fit width</title>
</head>
<body>
<hr>
<div class="text">
<span>
My text
</span>
</div>
</body>
</html>

CSS

.text {
     position: relative;
     top: -1em;
     text-align: center;
 }
 
 .text span {
     background-color: #ffffff;
     margin-left: auto;
     margin-right: auto;
     padding-left: 0.5em;
     padding-right: 0.5em;
 }