Inlining a HR element

Question

I want to use hr in the middle of the same line.

sample:

<p style="text-align: left;">TEST <span style="float: right;" >A 200T</span></p><hr>

Result:

TEST A 200T

But I want it like this...

I can't put <hr> on the same line like this image. I couldn't find enough resources on this subject.

https://stackoverflow.com/questions/16434706/what-is-the-difference-between-p-div-and-span-in-htmlxhtml — Maniax, Jul 05 '22 at 13:53

score 2 · Answer 1 · answered Jul 05 '22 at 13:55

useful documentations
css grid layout: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
grid-template-columns : https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns ,
min-content: https://developer.mozilla.org/en-US/docs/Web/CSS/min-content

#container {
    /* for this project we are using css grid */
    display: grid;
    /* text: auto width (minumum width possible)
       hr: 1fr (max width possible)
       text: auto width (minumum width possible)
    */
    grid-template-columns: auto 1fr auto;
    /* margin between elements */
    gap: 1rem;
    /* centering */
    align-items: center;
}

#container hr {
    /* removing the bug of invisible hr */
    margin: 0;
    /* removing the bug of hr take all height (because of css grid) */
    height: min-content;
}

    <div id="container">
        <p>hello</p>
        <hr>
        <p>world</p>
    </div>

Inlining a HR element

1 Answers1