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

To align the text that some of it aligns to the left and some of it aligns to the right within the same line check the options below:

Option1.

Align the text in HTML using the CSS text-align property and CSS float property.

Add the text to the code:

<!DOCTYPE html>
<html>
<body>

<p style="text-align:left;">
    This text is on the left side.
<span style="float:right;">This text is on the right side.</span>
    </p>

</body>
</html>

Output:

This text is on the left side. This text is on the right side.

Option2

Align the text using HTML and CSS

<!DOCTYPE html>
<html>
    <head>
        <style>
            .right{
    float:right;
}

.left{
    float:left;
}
        </style>
    </head>
<body>

<span class="right">This text is on the right side.</span><span class="left">This text is on the left side.</span>

</body>
</html>

Output:

This text is on the right side.This text is on the left side.

Option3

Create the single row table and add the right float on the second cell:

<!DOCTYPE html>
<html>
    <head>
        <style>
.alignRight {
    float: right;
}
        </style>
    </head>
<body>

<table style="width: 100%;">
  <tr><td>This text is on the left side.</td>
  <td class="alignRight">This text is on the right side.</td></tr>
</table>

</body>
</html>

Output:

This text is on the left side.

This text is on the right side.

Enjoy coding!

Share this: