Как дополнить строку после заголовка полосой?

В общем у меня есть блоки с текстом, там есть заголовок и внизу контент, так вот, заголовок чуть слева, и нужно что бы после него появлялась полоса по середине до конца блока, как бы вот так:

Заголовок ----------------------------------

Разный всякий текст, много разного

всякий текст, много разного

Заголовок побольше -------------------

Разный всякий текст, много разного

всякий текст, много разного

Подскажите пожалуйста как такое можно сделать?

Ну тут по любому псевдоэлемент after, просто блок дорисовываем после заголовка и заливаем его, вот и всё по сути)

<div class="element">
<div
class="head">
<div
class="title">Here your first title

<div
class="body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde nisi ut, odit nihil ex voluptatum quia reiciendis dolores. Reiciendis, sequi unde! Molestiae facilis quam enim optio perspiciatis quidem perferendis aperiam.

<div
class="element">
<div
class="head">
<div
class="title">Here second

<div
class="body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde nisi ut, odit nihil ex voluptatum quia reiciendis dolores. Reiciendis, sequi unde! Molestiae facilis quam enim optio perspiciatis quidem perferendis aperiam.


.
element {
padding: 15px;
margin: 10px;
max-width: 300px;
border: 1px solid;
word-break: break-all;
}
.
head {
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: 24px;
padding-bottom: 10px;
}
.
head:after {
content: "";
display: block;
height: 3px;
background: blue;
flex: 1 0 0;
}
.
title {
margin: 0 10px;
}
::
selection {
background: white;
color: #000;
}
::
-moz-selection {
background: white;
color: #000;
}
body {
background: gray;
color: black;
}