How can I align the text to the left and the text to the right in one line?

Question

How can I align text so that part of it aligns to the left, and part of it aligns to the right within the same line?

<p>This text should be left-aligned. This text should be right aligned.</p> 

I can align all the text to the left (or right), either directly in a line, or using a stylesheet -

 <p style='text-align: left'>This text should be left-aligned. This text should be right aligned.</p> 

How can I align the corresponding text left and right while keeping it on the same line?

Answer 1

 <p style="text-align:left;"> This text is left aligned <span style="float:right;"> This text is right aligned </span> </p> 

https://jsfiddle.net/gionaf/5z3ec48r/

Answer 2

HTML:

 <span class="right">Right aligned</span><span class="left">Left aligned</span>​ 

css:

 .right{ float:right; } .left{ float:left; } 

Demo:
http://jsfiddle.net/W3Pxv/1

Answer 3

If you do not want to use floating elements and want both blocks to not overlap, try:

 <p style="text-align: left; width:49%; display: inline-block;">LEFT</p> <p style="text-align: right; width:50%; display: inline-block;">RIGHT</p> 

Answer 4

HTML FILE:

 <div class='left'> Left Aligned </div> <div class='right'> Right Aligned </div> 

CSS FILE:

 .left { float: left; } .right { float: right; } 

and you are done ....

Answer 5

 <h1> left <span> right </span></h1> 

CSS

 h1{text-align:left; width:400px; text-decoration:underline;} span{float:right; text-decoration:underline;} 

Answer 6

Although some solutions will work here, none of them will overlap and ultimately move one element below the other. If you try to arrange data that will be dynamically linked, you won’t know until runtime that it looks bad.

What I like to do is simply create one row table and apply the correct float to the second cell. There is no need to apply left justification for the first, which happens by default. This does a great job of overlaying words.

HTML

 <table style="width: 100%;"> <tr><td>Left aligned stuff</td> <td class="alignRight">Right aligned stuff</td></tr> </table> 

CSS

 .alignRight { float: right; } 

https://jsfiddle.net/esoyke/7wddxks5/

Answer 7

Add a range for each or group of words that you want to align left or right. then add id or class to span, for example:

 <h3> <span id = "makeLeft"> Left Text</span> <span id = "makeRight"> Right Text</span> </h3> 

CSS -

 #makeLeft{ float: left; } #makeRight{ float: right; } 

Answer 8

If you just want to change the alignment of the text, just create classes

 .left { text-align: left; } 

and pass this class through text

 <span class='left'>aligned left</span>