JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
    <h1>Test</h1>
</div>

CSS

.test {
    border: 1px solid black;
    width: 1000px;
    height: 200px;
}
h1 {
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        color: #5d5d5d;
        margin: 0 0 32px 0;        
    }
    
    h1:before {
        text-align: left;
        background-image: url('http://modeles-de-lettres.org/test/images/h_ltr.png');
        background-repeat: no-repeat;     
        background-position: center left;   
        padding: 0 352px 0 0;
        content: "\00a0";
    }
    
    h1:after {
        background-image: url('http://modeles-de-lettres.org/test/images/h_rtl.png');
        background-repeat: no-repeat;    
        background-position: center right;
        padding: 0 180px;
        content: "\00a0";
    }