JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rule">
<h1>Hello Worlds</h1>
</div>

CSS

.rule h1:before, .rule h1:after {
content: '';
position: absolute;
    top: 50%; right: 100%;
    margin-top: -3px;
    background: black;
    height: 5px;
    width: 10000px;
    z-index: 10;
}
.rule h1:after {
 right: auto;
left: 100%;    
}

.rule { overflow: hidden; }

h1 {
    position: relative;
    z-index: 20;
    display: inline-block;
    padding: 0 5px;
    margin: 0 20px;
}

body { background: #ccc; }