JSFiddle - React, Tailwind, and code Playground

by Brandon Frohs

HTML

<div id="container">
    <h1><span>a</span></h1>
    <h1><span>a b c</span></h1>
    <h1><span>a b c d e f</span></h1>
    <p>Change text shorter or longer.</p>
    <p>Need left lines to be dynamic.</p>
</div>

CSS

h1 {
    display:flex; /* Treats the :before, :after, and span as individual items */
    align-items:center; /* Aligns items vertically (to align border properly) */
    text-align:center; /* Aligns items horizontally for browsers that don't support flexbox */
}
h1 span {
    /* Places arrow on each side of span */
    background: url('https://dl.dropboxusercontent.com/u/101534624/arrow_cyan.gif') no-repeat left,
        url('https://dl.dropboxusercontent.com/u/101534624/arrow_cyan.gif') no-repeat right;
    padding: 0 50px; /* Prevents text from overlapping image */
}
h1:before,
h1:after {
    content: " ";
    /* Lines on sides of header */
    background: url('https://dl.dropboxusercontent.com/u/101534624/h1-lines.png') repeat-x;
    height: 6px; /* Height of lines */
    flex-grow:1; /* Makes lines expand to edges of screen */
}