How to make h4 appear on top of hr or div?

Question

css

Link to Codepen
I need to lay out a header like this, with a line to the end of the block on each edge. And no matter how I tried to make this feature behind the title, so that the background of the title overlapped it, nothing came of it.

Tried z-index. It works only if you set a negative value, but then the line disappears altogether for the entire layout. And I don’t want to customize the entire layout for this.
I tried to replace hr with div, there was no sense, it behaves exactly the same.
Help.

Answer 1

codepen.io/anon/pen/epvdLZ