'How to display paragraph next to another paragraph without flexbox? [duplicate]

I need to reach below effect without using flexbox:

<div style="display: flex">
    <p>Paragraph1</p>
    <p style="margin-left: auto;">Paragraph2</p>
</div>

Is there possibility to make it only with float and text align?

htmlcss


Solution 1:[1]

* { 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>

Solution 2:[2]

Could try grid:

div {
  display: grid;
  grid-auto-flow: column;
}
<div>
  <p>Paragraph1</p>
  <p>Paragraph2</p>
</div>

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

Related Questions