Eu usaria uma div container com flexbox e aplicaria `flex-grow: 1` no `hr` para ele ocupar a largura restante da div onde não está o texto. E um `margin-left` para dar um espaçamento. E em vez de borda, usaria `height: 1px` e o vermelho de cor de fundo. Precisa também retirar as bordas padrão do `hr`, para que ele fique como se fosse uma linha vermelha de 1 pixel de altura.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .paragrafo{
       display: flex;
       align-items: center;
    }

    .paragrafo hr{
       background: red;
       flex-grow: 1;
       margin-left: 10px;
       height: 1px;
       border: none;
    }

<!-- language: lang-html -->

    <div class="paragrafo">
       <p>Colocar a tag <b>hr</b> em frente do <b>p</b></p><hr>
    </div>

<!-- end snippet -->