Как распложить блок подчёркивания под текстом?

Верстая сейчас сайт по макету и столкнулся с проблемой, с которой из-за моего небольшого опыта, не справиться.

На изображении выше, под началом строки, располагается небольшое подчёркивание. Вопрос - как его реализовать?

Этот текст находится в коде страницы как параграф ( с соответствующим тегом ) и при абсолютном позиционировании единственное как я могу задать его положение - это от начала параграфа, но при уменьшении экрана он там же и остаётся, а сам текст двигается для выравнивания и получается вот это:

Буду очень благодарен, если объясните как сделать правильно, а то уже много часов сижу на этим )

P.S. Извиняюсь что сразу не добавил!

Вот фрагмент кода из HTML:

<div class="reused__header">
    <div class="indoor__unit">
        <p>Пакет ссылок для продвижения сайта</p>
        <div class="underscore__title"></div>
    </div>
</div>

А вот фрагмент CSS-стилей:

.reused__header {

    position: relative;

    width: 100%;
    height: 65px;

}

.indoor__unit {

    position: relative;

    width: 90%;
    height: 100%;

    text-align: center;

    margin-left: auto;
    margin-right: auto;

}

.reused__header p {

    word-break: break-word;

    font-size: 24px;
    font-family: "MontserratAlternates-Black";
    font-weight: 900;
    font-style: normal;

    color: #000000;

    line-height: 50px;

}

.underscore__title {

    position: absolute;

    top: 45px;
    left: 0;

    width: 60px;
    height: 5px;

    background: #6C16A1;

}