Title with lines filling remaining space on both sides

Question

I\'ve been asked to create this title, purely with css, Is it even possible?

Answer 1

Here is solution using display: table;
and display: table-cell;

The lines on the side grow and shrink after the content of the header.

.headline {
  display: table;
  line-height: 3px;
  white-space: nowrap;
}
.headline:before {
  width: 20%;
  height: 2px;
  margin-top: 20px;
  border-right: 10px solid transparent;
}
.headline:after {
  width: 80%;
  border-left: 10px solid transparent;
}
.headline:before,
.headline:after {
  content: '';
  display: table-cell;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

  Headline


  Headline thats longerrrrrrrrrrrrrrrrr