Vou deixar um exemplo que vai funcionar para todos os casos, com qualquer tamanho de frase (quantas palavras quiser), ou com qualquer `font-size`, ou mesmo em um `<h1>` ou `<p>` Repare que eu coloque o `p` e o `hr` dentro de um `container` com `display:flex`, isso vai deixar os elementos lado a lado na horizontal, depois eu coloquei `flex:1` no `hr`, isso vai fazer ele crescer e ocupar apenas o espaço restante da largura do `container`. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .meu-hr { display: flex; align-items: center; } .meu-hr hr { flex:1; border-color: red; margin-left: .5em; } <!-- language: lang-html --> <div class="meu-hr"> <p>123</p><hr> </div> <div class="meu-hr"> <h1>123456</h1><hr> </div> <div class="meu-hr"> <p style="font-size:40px">123456789</p><hr> </div> <!-- end snippet -->