JSFiddle - React, Tailwind, and code Playground

HTML

<div class="title-box">
<span id="first" class="title-inner">OUR LOOOoo oooo oOONG STORY</span>

</div>
<div class="title-box"> <span id="second" class="title-inner">OUR STORY</span>

</div>
<div class="title-box"> <span id="third" class="title-inner">STORY</span>

</div>

CSS

.title-box {
    text-align: center;
}
.title-inner {
    font-size: 17.5px;
    font-weight:bold;
    margin: 0 20px;
    position: relative;
    color:rgb(100, 100, 100);
}
.title-inner:after, .title-inner:before {
    content:"";
    float: right;
    position: relative;
    top: 8px;
    height: 2px;
    background: red;
}
.title-inner:before {
    float: left;
}

JavaScript

$(document).ready(function () {

    function work() {
        $(".title-inner").each(function () {
            var full_width = $(window).width();
            var id = $(this).attr("id");
            var title_width = $("#" + id).width();
            var new_width = (full_width - title_width) / 2 - 40;
            $('head').append("<style>#" + id + ":before, #" + id + ":after{width:" + new_width + "px !important;}</style>");
        });
    }
    work();
    $(window).resize(function () {
        work();
    });
});