Position of a text in relation to the upper line

One possible solution would be to use absolute positions, but any difference in the fonts used would mess up your layout.

With a slight adjustment in HTML, you can solve the problem:

<div class="alinhados">
    <p><span>olá 1</span>beijo</p>
    <p><span>beijo olá 1</span></p>
    <p><span>1</span>beijo olá</p>
</div>

And in CSS:

.alinhados p {
   position:relative;
   overflow:auto;
   width:100%;
}

.alinhados span {
   display:block;
   position:relative;
   width:50%;
   float:left;
   text-align:right;  
}

In this way, simply adjust the width:50% to determine the alignment point.

  

See working at JS Fiddle .

You will have to use JavaScript to do this, although CSS would be sufficient, but would be limited in relation to text alignment. Use Jquey to make it easier. The alignment will always be relative to the first element, so you can align it where you want.

See a working example: link

With the above script, simply enter new phrases that will automatically be aligned.

As the link may one day not work, I leave here the complete code:

HTML :

<div class="textos">
    <p>olá <span>1</span> beijo</p>
    <p>beijo olá <span>1</span></p>
    <p><span>1</span> beijo olá</p>
</div>

CSS :

.textos {
    display: block;
    float: left;
    width: auto;
    height: auto;
 }

.textos p {
    display: block;
    float:left;
    position: relative;
    clear: both;
}

JavaScript: (you need to include the Jquery library on your page)

var nPos;

$(document).ready(function(){
    $(".textos p").each(function( index ) {
        if(nPos==undefined){
            nPos = $(this).find('span').position().left;
        }else{
            nCurrentPos = $(this).find('span').position().left;
            $(this).css({'margin-left':(nPos-nCurrentPos)+'px'});
        }
    });
});

Hello, for text, you can use the

ex:

<div>
<p>olá 1 beijo</p>
<p>beijo olá 1</p>
<p>1 beijo olá</p>
</div>

If not, please put a piece of your code