Как я могу выровнять текст по левому краю и текст по правому краю в одной строке?

Как я могу выровнять текст так, чтобы часть его выровнялась по левому краю, а часть по правому краю в пределах одной строки?

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

Я могу выровнять весь текст по левому (или по правому) краю, либо непосредственно в строке, либо с помощью таблицы стилей -

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

Как я могу выровнять соответствующий текст по левому и правому краю, оставив его в одной строке?

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

Демо:
http://jsfiddle.net/W3Pxv/1

Если вы не хотите использовать плавающие элементы и хотите убедиться, что оба блока не перекрываются, попробуйте:

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

HTML-ФАЙЛ:

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

CSS-ФАЙЛ:

.left
{
  float: left;
}

.right
{
  float: right;
}

и все готово ....

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

css:

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

Хотя некоторые из решений здесь будут работать, ни одно из них не справляется с перекрытием и в конечном итоге перемещает один элемент ниже другого. Если вы пытаетесь разметить данные, которые будут динамически привязаны, вы не узнаете до времени выполнения, что они выглядят плохо.

Что мне нравится делать, так это просто создавать однострочную таблицу и применять правильное число с плавающей запятой ко второй ячейке. Не нужно применять выравнивание по левому краю к первому, это происходит по умолчанию. Это отлично справляется с перекрытием за счет переноса слов.

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/

Добавьте интервал для каждого или группы слов, которые вы хотите выровнять влево или вправо. затем добавьте идентификатор или класс в диапазон, например:

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

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

Если вы используете Bootstrap, попробуйте следующее:

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

Если вы просто хотите изменить выравнивание текста, просто создайте классы

.left {
text-align: left;
}

и охватите этот класс по тексту

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