JSFiddle - React, Tailwind, and code Playground

HTML

<!--  Single line example works as the black bars are 20px away from the start/end of text-->
<div class="container">
  <h2><span>This is a title</span></h2>
</div>

<br> <br>

<!--  double line doesn't work because the h2 is now the full width of the container -->
<div class="container">
  <h2><span>This is loooonnggggggggggggggggggggggeeeeerrr</span></h2>
</div>

CSS

h2:after, h2:before {
    content:"";
    width:4px;
    height:20px;
    background: #000000;
    display:inline-block;
    margin:0 10px;
}