JSFiddle - React, Tailwind, and code Playground

HTML

<h2><span>Small title</span></h2>
<h2><span>This is a very long title</span></h2>

CSS

h2{
    width:100%;
    position:relative;
    top:0; left: 0;
}

h2:before,
h2:after{
    content:"";
    display:inline-block;
    width:30%;
    height:1px;
    background-color:red;
    position:relative;
    top: -10px;
}

h2:before{
    left:0;
}

h2:after{
    right:0;
}

h2 span{
    width:40%;
    display:inline-block;
    text-align:center;
}