Comment puis-je aligner le texte à gauche et le texte à droite sur la même ligne?

Comment puis-je aligner le texte de sorte qu'une partie s'aligne à gauche et une partie à droite dans la même ligne?

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

Je peux aligner tout le texte à gauche (ou à droite), soit directement en ligne, soit en utilisant une feuille de style -

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

Comment aligner le texte correspondant à gauche et à droite, tout en le gardant sur la même ligne?

<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;
}

Démo:
http://jsfiddle.net/W3Pxv/1

Si vous ne souhaitez pas utiliser d'éléments flottants et que vous voulez vous assurer que les deux blocs ne se chevauchent pas, essayez:

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

FICHIER HTML:

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

FICHIER CSS:

.left
{
  float: left;
}

.right
{
  float: right;
}

et vous avez terminé ...

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

css:

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

Bien que plusieurs des solutions ici fonctionnent, aucune ne se chevauche bien et finit par déplacer un élément en dessous de l'autre. Si vous essayez de mettre en page des données qui seront liées dynamiquement, vous ne saurez pas avant l'exécution que cela semble mauvais.

Ce que j'aime faire, c'est simplement créer un tableau à une seule ligne et appliquer le flotteur droit sur la deuxième cellule. Pas besoin d'appliquer un alignement à gauche sur le premier, cela se produit par défaut. Ces poignées se chevauchent parfaitement par habillage de mots.

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/

Ajoutez une étendue sur chaque ou groupe de mots que vous souhaitez aligner à gauche ou à droite. puis ajoutez un identifiant ou une classe sur le span tel que:

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

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

Si vous utilisez Bootstrap, essayez ceci:

<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 vous souhaitez simplement modifier l'alignement du texte, créez simplement des classes

.left {
text-align: left;
}

et couvrir cette classe à travers le texte

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