Андрей Галкин

Я предложу Вам свой вариант реализации через псевдоэлементы after и before.

Код тут

Если Вам необходимо отображать текст поверх элемента со свойством absolute, можете использовать свойство z-index. Важно чтобы значение этого свойства у тега h2 Было больше чем значение у псевдоэлемента линии. Таким образом текст будет размещаться поверх линии.

Если я тебя правильно понял, ты пытаешься реализовать navbar на сайте с использованием css.
Есть вариант пойти через фелксбоксы и реализовать это следующим образом:
Код

Сделал на скорую руку, но это работает.

Медиа запросы используются в адаптивной верстке, есть несколько вариаций использования медиа:
1. Внутри css документа.
2. Задать конкретному css документу атрибут с шириной экрана в разных диапазонах.

Первый пункт я использую во вложенном документе стилей, который уже имеет атрибут media, только в частных случаях. Обычно мне по крайней мере достаточно 3 документов для реализации 3-х типов версток:
1. Desktop.
2. Tablet.
3. Mobile.

Если хочешь реально прокачаться в адаптивной верстке, есть ресурс, который помог мне в свое время: ссылка на ресурс
Он абсолютно бесплатный, там есть все для уверенного старта и прокачки уже имеющихся навыков.

Это можно сделать через flex`ы, пример кода тут: https://codepen.io/MrPackage/pen/NWwqvqr

Мне удалось задать фиксированную высоту заголовка при равном содержании текста в контейнере с классом .cards-item__descr. Посмотрите код по ссылке ниже, может быть это будет вам полезно.

КОД ТУТ: https://codepen.io/MrPackage/pen/WNxbjdd

Обычно я делаю следующим образом:
Завожу 2 поля с наименованиями а-ля "Description" - полное описание поста, может содержать совершенно любую длину контекста и "Excerpt" - выдержка из текста, может содержать не более 200 символов (например). Таким образом получаю контейнер, который +- содержит примерно равную высоту.