JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-container">
    <h1>
      <span id="left">&nbsp;</span>
      <span id="center">Hello&nbsp;World</span>
      <span id="right">&nbsp;</span>
  </h1>
</div>

CSS

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { 
    display: block; 
}
body {
    background:url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/tiny_grid.png");
}

.main-container {
    margin: 0 auto;
    box-shadow:0 0 5px #d00;
    padding: 0 0 10px 0;
}

  h1 { 
    display: table;
}
  h1 span { 
    display: table-cell; 
    text-align: center;
}
  #left, #right {
    width: 50%; 
    border-bottom: 1px solid black;
}
  #center {
    display: inline-block; 
    position: relative; 
    top: 0.5em; 
    padding: 0 0.5em; 
}