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

If you don't want to use floating elements and want to make sure that both blocks do not overlap, try:

<p style="text-align: left; width:49%; display: inline-block;">LEFT</p>
<p style="text-align: right; width:50%;  display: inline-block;">RIGHT</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;
}

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

Related