How to put a <p> on the same line as <hr>

Question

It is possible to place the element <hr> in front of an element <p>?

 hr{
   border-top: 1px solid red;
}

<p>Colocar a tag <b>hr</b> em frente do <b>p</b> </p><hr>

I’ve tried to use display:inline in <p> and in <hr>

Answer 1

I’ll leave an example that will work for all cases, with any sentence size (as many words as you want), or with any font-size, or even in a <h1> or <p>

Notice I put the p and the hr within a container with display:flex, this will leave the elements side by side horizontal, then I put flex:1 in the hr, this will make it grow and occupy only the remaining space of the width of the 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>

Answer 2

I would use a container div with flexbox and apply flex: 1 in the hr for it to occupy the remaining width of the div where the text is not. And a margin-left to give a spacing. And instead of edge, would use height: 1px and the background color red. You also need to remove the standard borders of the hr, so that it looks like a red line 1 pixel high.

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

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

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

Answer 3

 hr{
   margin-top:-25px;
   margin-left:213px;
   border-top: 1px solid red;
   }

<p>Colocar a tag <b>hr</b> em frente do <b>p</b> </p><hr>