How may I align text to the left and text to the right in the same line?

How can I align text so that some of it aligns to the left and some 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 of the text to the left (or to the right), either directly inline, or by 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 to the left and to the right, while keeping it on the same line?

11 Answers

<p> This text is left aligned <span> This text is right aligned </span> </p>

​HTML:

<span>Right aligned</span><span>Left aligned</span>​ 

css:

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

Demo:

If you don't want to use floating elements and want to make sure that both blocks do not overlap, try:

<p>LEFT</p> <p>RIGHT</p> 

An answer using css flex layout and justify-content

p { display: flex; justify-content: space-between; }

<p> <span>This text is left aligned</span> <span>This text is right aligned</span> </p>

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

While several of the solutions here will work, none handle overlap well and end up moving one item to below the other. If you are trying to layout data that will be dynamically bound you won't know until runtime that it looks bad.

What I like to do is simply create a single row table and apply the right float on the second cell. No need to apply a left-align on the first, that happens by default. This handles overlap perfectly by word-wrapping.

HTML

<table> <tr><td>Left aligned stuff</td> <td>Right aligned stuff</td></tr> </table> 

CSS

.alignRight { float: right; } 

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

css:

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

Add span on each or group of words you want to align left or right. then add id or class on the span such as:

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

CSS-

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

One example, only to show the richness of the solution from Benjamin Udink ten Cate in the answer above: "An answer using css flex layout and justify-content"

With this CSS:

 p { display: flex; justify-content: space-between; } #connettore{ overflow: hidden; margin: 0px 20px 10px 180px; width: 250px; align:left; } ol#connettore { counter-reset: pin 6; /* Initiate a counter */ list-style: none; /* Remove default numbering */ /*list-style: decimal; /* Keep using default numbering for IE6/7 */ font: 15px 'trebuchet MS', 'lucida sans'; padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255,255,255,.5); } ol ol { margin: 0 0 0 2em; /* Add some left margin for inner lists 20px*/ } /*=========== Rectangle-shaped numbers ===========*/ .rectangle-list a{ position: relative; display: block; padding: .1em .2em .1em .8em; margin: .5em 0 .5em 2.5em; background: #ddd; color: #444; text-decoration: none; transition: all .3s ease-out; line-height: .1px; } .rectangle-list a:hover{ background: #eee; } .rectangle-list a:before{ content: counter(pin); counter-increment: pin -1; position: absolute; left: -2.5em; top: 50%; margin-top: -1em; background: #fa8072; height: 2em; width: 2em; line-height: 2em; text-align: center; font-weight: bold; } .rectangle-list a:after{ position: absolute; content: ''; border: .5em solid transparent; left: -1em; top: 50%; margin-top: -.5em; transition: all .3s ease-out; } .rectangle-list a:hover:after{ left: -.5em; border-left-color: #fa8072; }

<ol > <li><a href=""><p><span>BLU</span> <span>(SWDIO)</span></p> </a> </li> <li><a href=""><p><span> MARRONE</span> <span>(SWDCLK)</span></p> </a></li> <li><a href=""><p><span>GIALLO</span> <span>(RESET)</span></p> </a></li> <li><a href=""><p><span>NERO</span> <span>(GND)</span></p> </a></li> <li><a href=""><p><span>BIANCO</span> <span>(VCC)</span></p> </a> </li> </ol>

This is the way I do pinout. :-)

If you're using Bootstrap try this:

<div> <div>left align</div> <div>right align</div> </div> 

If you just want to change alignment of text just make a classes

.left { text-align: left; } 

and span that class through the text

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