There are two blocks in which there is a text of variable length
It is necessary that one block is on the right side, and the second block is attached to it. and if the second block has a large text, then it was moved to the line below.

```
<div style="text-align:right;">
    <span>
      You are logged on as a user <span>{username}</span>

         {sometext}
          | <a href="#">Change password</a>
          | <a href="#">Exit</a>
    </span>
</div>

```

I tried to do so.

```
<div style="position:relative;">
    <span>
      <div style="position:absolute; right: 250px;">
        You are logged on as a user <span>{username}</span>
      </div>
      <div style="position:absolute; top:0; right:0;">
        {someText}
          | <a href="#">Change password</a>
          | <a href="#">Exit</a>
      </div>
    </span>
</div>

```

But nothing happened, the block with the user's name rides on the right block
How to make so that blocks did not run into each other and the text was transferred to a new line if it does not enter?