Estoy tratando de crear dos bordes una a la izquierda y otra a la derecha y el texto principal quede en el medio de los dos bordes.


>Un ejemplo a la idea a lo que estoy tratando de lograr he subido dos imágenes de muestra.

Trate realizando de esta manera pero las dos lineas se juntan.

        <div class="www">
          
          <h4><span class="lineseparator"></span>
            TITLE NOT TITLE
            <span class="lineseparator"></span>
          </h4>
          
          <p>Content and content and contecnt</p>
        </div>

>Intente de esta otra forma pero el mismo problema.

        <div class="www">
          <span class="lineseparator"></span>
          <h4>TITLE NOT TITLE</h4>
          <span class="lineseparator"></span>
          <p>Content and content and contecnt</p>
        </div>

**Ejecución:**

<!-- begin snippet: js hide: true console: false babel: false -->
<!-- language: lang-css -->
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 13px;
  font-family: 'OpenSans', 'cursive', 'Releway', Roboto, Lato, Utsaah;
  background-color: #FBFBFB;
}
.www {
  position: relative;
  padding-top: 35px;
}
.lineseparator {
    height: 1px;
    border-top: 1px solid #000;
    display: block;
    position: relative;
    top: 12px;
    width: 20%;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

p {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
}
<!-- language: lang-html -->

        <div class="www">
          <span class="lineseparator"></span>
          <h4>TITLE NOT TITLE</h4>
          <span class="lineseparator"></span>
          <p>Content and content and contecnt</p>
        </div>

<br><br><br>
        <div class="www">
          
          <h4><span class="lineseparator"></span>
            TITLE NOT TITLE
            <span class="lineseparator"></span>
          </h4>
          
          <p>Content and content and contecnt</p>
        </div>


<!-- end snippet -->

Lo que deseo lograr es lo siguiente el ejemplo lo tome de un sitio web.
[![introducir la descripción de la imagen aquí][1]][1]


Y que al hacer responsive se adapte de la siguiente manera.
[![introducir la descripción de la imagen aquí][2]][2]


  [1]: https://i.sstatic.net/9XViO.png
  [2]: https://i.sstatic.net/409TY.png