[html] How to write both h1 and h2 in the same line?

I have a page and I want simply to make a header. This header is an <h1> text aligned to the left, and an <h2> aligned to the right, in the same line, and after them, an <hr>. My code so far look as follows (if you test it, you'll see that it's wrong):

<h1 align="left">Title</h1> 
<h2 align="right">Context</h2> 
<hr/>

Thanks guys!

<h1 style="text-align: left; float: left;">Text 1</h1>
<h2 style="text-align: right; float: right; display: inline;">Text 2</h2>
<hr style="clear: both;" />

Hope this helps!

Put the h1 and h2 in a container with an id of container then:

#container {
    display: flex;
    justify-content: space-beteen;
}

In answer the question heading (found by a google search) and not the re-question To stop the line breaking when you have different heading tags e.g.

<h5 style="display:inline;"> What the... </h5><h1 style="display:inline;"> heck is going on? </h1>

Will give you:

What the...heck is going on?

and not

What the... 
heck is going on?

h1 and h2 are native display: block elements.

Make them display: inline so they behave like normal text.

You should also reset the default padding and margin that the elements have.

In many cases,

display:inline;

is enough.

But in some cases, you have to add following:

clear:none;