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

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>
htmlcss


Solution 1:[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/

Solution 2:[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>

Solution 3:[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;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 GROVER.
Solution 2 Ram Segev
Solution 3 Doppelbemme

Related Questions