¿Cómo puedo alinear el texto a la izquierda y el texto a la derecha en la misma línea?

¿Cómo puedo alinear el texto para que parte de él se alinee a la izquierda y parte de él se alinee a la derecha dentro de la misma línea?

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

Puedo alinear todo el texto a la izquierda (oa la derecha), ya sea directamente en línea o usando una hoja de estilo -

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

¿Cómo puedo alinear el texto correspondiente a la izquierda y a la derecha, manteniéndolo en la misma línea?

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

HTML:

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

css:

.right{
    float:right;
}

.left{
    float:left;
}

Demostración:
http://jsfiddle.net/W3Pxv/1

Si no desea utilizar elementos flotantes y desea asegurarse de que ambos bloques no se superpongan, intente:

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

ARCHIVO HTML:

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

ARCHIVO CSS:

.left
{
  float: left;
}

.right
{
  float: right;
}

y ya está ...

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

css:

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

Si bien varias de las soluciones aquí funcionarán, ninguna maneja bien la superposición y termina moviendo un elemento debajo del otro. Si está intentando diseñar datos que se vincularán dinámicamente, no sabrá hasta el tiempo de ejecución que se ve mal.

Lo que me gusta hacer es simplemente crear una tabla de una sola fila y aplicar el flotador correcto en la segunda celda. No es necesario aplicar una alineación a la izquierda en el primero, eso sucede de forma predeterminada. Esto maneja la superposición perfectamente mediante el ajuste de palabras.

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/

Agregue espacio en cada palabra o grupo de palabras que desee alinear a la izquierda oa la derecha. luego agregue id o clase en el intervalo como:

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

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

Si está utilizando Bootstrap, intente esto:

<div class="row">
    <div class="col" style="text-align:left">left align</div>
    <div class="col" style="text-align:right">right align</div>
</div>

Si solo desea cambiar la alineación del texto, simplemente haga clases

.left {
text-align: left;
}

y abarcar esa clase a través del texto

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