Two p tag in same line

Question

I have two p tags

<p style="margin: 0; display: inline;">content1</p>
<p style="margin: 0; display: inline;" align="right">content2</p>

The Output is content1content2. My expectation is like this:

content1                                                                content2 

Can anyone help. I want one "content1" in the left p and "content2" in the right 'p'.

Answer 1

What you really want is something that doesn't assume sufficent width to fit both paragraphs into one line:

* { box-sizing: border-box; }
.two { width: 30em; max-width: 100%; }
.two p { display: inline-block; max-width: 50%; }
.two p:nth-child(1) { float:left; }
.two p:nth-child(2) { float:right; }

<div class="two">
    <p>This is the first paragraph of two.</p>
    <p>This is the second paragraph of two.</p>
</div>

Answer 2

You can use CSS flexbox for this. Below is the minimal CSS for the requested layout:

<div style="display: flex; justify-content: space-between;">
  <p style="background-color: papayawhip;">Lorem ipsum dolor sit amet.</p>
  <p style="background-color: palegoldenrod;">Donec eget luctus lacus.</p>
</div>

For longer content, you can use fixed-width columns:

<div style="display: flex; justify-content: space-between;">
  <p style="flex-basis: 49.5%; background-color: papayawhip;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget luctus lacus. Cras consectetur elementum mi sed consequat.</p>
  <p style="flex-basis: 49.5%; background-color: palegoldenrod;">Pellentesque aliquet condimentum augue in mattis. Praesent sagittis nisl magna, a volutpat arcu imperdiet vel. Quisque et orci sed ligula cursus luctus.</p>
  <!-- 49.5% + 49.5% = 99%, remaining 1% is distributed according to justify-content -->
</div>