JSFiddle - React, Tailwind, and code Playground
HTML
<div class="outer">
<h3>This is a test.</h3>
<p>Banksy gentrify photo booth, put a bird on it you probably haven't heard of them scenester quinoa ullamco letterpress vero. Voluptate etsy tattooed, portland pitchfork Austin fap ad high life viral sartorial american apparel pariatur. Cardigan carles terry richardson, ullamco jean shorts banksy dolore ad cillum blog. Art party pariatur echo park mollit. Dreamcatcher adipisicing williamsburg, put a bird on it mcsweeney's duis lo-fi anim pitchfork consequat. Eiusmod proident yr, tattooed seitan vegan cupidatat brunch viral. Readymade eiusmod stumptown, do american apparel banksy skateboard terry richardson.</p>
<h3>This is a test. With a longer one.</h3>
<p>Banksy gentrify photo booth, put a bird on it you probably haven't heard of them scenester quinoa ullamco letterpress vero. Voluptate etsy tattooed, portland pitchfork Austin fap ad high life viral sartorial american apparel pariatur. Cardigan carles terry richardson, ullamco jean shorts banksy dolore ad cillum blog. Art party pariatur echo park mollit. Dreamcatcher adipisicing williamsburg, put a bird on it mcsweeney's duis lo-fi anim pitchfork consequat. Eiusmod proident yr, tattooed seitan vegan cupidatat brunch viral. Readymade eiusmod stumptown, do american apparel banksy skateboard terry richardson.</p>
</div>
CSS
body {
}
h3 {
position: relative;
display: inline-block;
padding: 10px;
}
h3:before,
h3:after {
background: #fff;
height: 2px;
top: 50%;
margin-top: -1px;
}
h3:before {
content: '';
position: absolute;
left: 0;
margin-left: -9999em;
padding-left: 9999em;
}
h3:after {
content: '';
position: absolute;
right: 0;
margin-top: -1px;
margin-right: -9999em;
padding-right: 9999em;
background: #000;
height: 2px;
top: 50%;
}
/* An example of outer markup */
.outer {
overflow: hidden;
text-align: center;
font: 12px sans-serif;
padding-top: 30px;
width: 80%;
margin: 0 auto;
}
.outer > p {
text-align: left;
margin-bottom: 25px;
}