H2 and P on same line (HTML, CSS, PHP) - html

Question

Hi i would like to have my h2 heading and p on the same line with 2 empty spaces between them. I have tried almost all solutions but i dont know what im doing wrong. Here is my CSS and HTML:
h3 {
float: right;
padding: 0;
margin: 0;
left: 20px;
display: inline;
color: #00cccc;
}
publish_date {
text-align: left;
padding: 0;
margin: 0;
color: #ff0033
}
<publish_date>Lorem ipsum</publish_date>
<h3>Sit amet</h3>

Answer 1

Test this out!
CSS:
p, h3{
display: inline-block; /* display on the same line */
}
h3{
position: relative;
left: 20px; /* this will not work without setting position property */
padding: 0;
margin: 0;
color: #00cccc;
float: right;
}
p{
padding: 0;
margin: 0;
color: #ff0033
text-align: left;
}
HTML:
<p><?php echo $the_publish_date ?></p><h3><?php echo $article_title1 ?></h3>
Just for your information, as Muhammad Usman stated, "<publish-date> is not a valid HTML tag", and whilst you are able to do this, there is no real point to it. You might as well just stick to the native <p> or <span> tags.
Hope it helps!
JSFiddle: https://jsfiddle.net/n3kmd9ye/

Answer 2

Add to h3 float:left; margin-right:10px;
float:left will put the next to each other and with the margin-right you can control the distance between them.
h3 {
float: right;
padding: 0;
margin: 0;
left: 20px;
display: inline;
color: #00cccc;
float:left;
margin-right:10px;
}
publish_date {
text-align: left;
padding: 0;
margin: 0;
color: #ff0033
}
<publish_date>Lorem ipsum</publish_date>
<h3>Sit amet</h3>

Answer 3

I know this is a bit outdated here but this is the way how I solved it.
Put a wrapper around the two elements like this:
<div class="publish-wrapper">
<publish_date>Lorem ipsum</publish_date>
<h3>Sit amet</h3>
</div>
And then use a flexbox.
.publish-wrapper {
display: flex;
flex-direction: row;
}