Vou deixar um exemplo que vai funcionar para todos os casos, com qqqualquer tamanho de frase (quantas palavras quiser), ou com qqqualquer 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
.
.meu-hr {
display: flex;
align-items: center;
}
.meu-hr hr {
flex:1;
border-color: red;
margin-left: .5em;
}
<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>