Заглавие раздела. Как правильно сверстать такой элемент?

Question

[Владимир Кабыш]

День добрый.

Задался вопросом как правильно сверстать такой элемент. Это оглавление раздела: Его название, а справа от него полоса, которая тянется на всю ширину. Вот я и хочу узнать, как это сделать правильно. Мой вариант с использованием тега hr мне не очень нравиться. Всегда нужно будет подкручивать его длина(зависит от длины названия раздела).

Как бы это сделали вы? И можно ли что-то придумать, что бы полоса справа подстраивалась под длину названия раздела?

Фото-пример прилагаю.

Answer 1

[Михаил Румянцев]

<article>
  <header>
    <h1>Header</h1>
    <hr />
  </header>
  <section>
    Content
  </section>
</article>

header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

hr {
  flex-grow: 1;
}

Только замените селекторы на классы

Answer 2

[Максим]

https://jsfiddle.net/pdraj9hk/ я вот так сделал