Bagaimana cara meratakan teks ke kiri dan teks ke kanan dalam baris yang sama?

Bagaimana saya bisa meratakan teks sehingga beberapa di antaranya sejajar ke kiri dan beberapa di antaranya sejajar ke kanan dalam baris yang sama?

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

Saya bisa meratakan semua teks ke kiri (atau ke kanan), baik secara langsung sebaris, atau dengan menggunakan stylesheet -

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

Bagaimana saya bisa menyelaraskan teks yang sesuai ke kiri dan ke kanan, sekaligus menjaganya tetap di baris yang sama?

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

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

Jika Anda tidak ingin menggunakan elemen mengambang dan ingin memastikan bahwa kedua blok tidak tumpang tindih, coba:

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

FILE HTML:

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

FILE CSS:

.left
{
  float: left;
}

.right
{
  float: right;
}

dan kamu selesai ....

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

css:

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

Sementara beberapa solusi di sini akan berfungsi, tidak ada pegangan yang tumpang tindih dengan baik dan akhirnya memindahkan satu item ke bawah yang lain. Jika Anda mencoba untuk mengatur tata letak data yang akan terikat secara dinamis, Anda tidak akan tahu sampai runtime yang terlihat buruk.

Yang ingin saya lakukan hanyalah membuat tabel baris tunggal dan menerapkan float kanan pada sel kedua. Tidak perlu menerapkan rata kiri pada awalnya, itu terjadi secara default. Ini menangani tumpang tindih sempurna dengan pembungkusan kata.

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/

Tambahkan rentang pada setiap atau kelompok kata yang ingin Anda ratakan ke kiri atau kanan. lalu tambahkan id atau class pada span seperti:

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

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

Jika Anda menggunakan Bootstrap coba ini:

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

Jika Anda hanya ingin mengubah perataan teks, buat saja kelas

.left {
text-align: left;
}

dan rentangkan kelas itu melalui teks

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