JSFiddle - React, Tailwind, and code Playground

HTML

<div class="title-box"> 
    <fieldset class="title-outer">
            <legend id="titleInner" class="title-inner">OUR STORY</legend>
    </fieldset>
</div>

CSS

.title-box { 
    background-image: url('http://imagezo.com/images/1302-green-bubbles-awesome-background-wallpaper.jpg');
    height:100%;
}
.title-outer {
    border-width: 3px 0px 0px 0px;
    border-color: #f00;
    background-color: transparent;
}
.title-inner {
    padding:0px 20px;
    border: 0;
    background-color: transparent;
    font-size: 17.5px; 
    font-weight:bold; 
    color:rgb(255, 255, 255);
}

JavaScript

$(document).ready(function() {
    var legendWidth = $('#titleInner').outerWidth();
    var leftMargin = 'calc((100% - '+legendWidth+'px) / 2)';
    var rightMargin = 'calc((100% - '+legendWidth+'px) / 2)';
    $('#titleInner').css('margin-left', leftMargin);
    $('#titleInner').css('margin-right', rightMargin);
});