Place 'floating' contents at the bottom right of a paragraph of text

Question

Here is the code: http://jsfiddle.net/ym2GQ/

p {
  background: lightblue;
}

.end {
  background: orange;
  float: right;
  display: inline;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing orci at tortor bibendum suscipit et eu eros. Nunc congue, ante nec egestas fringilla, ipsum est porttitor leo, tempus lacinia augue erat posuere elit.
</p>
<div class="end">$$</div>

I want the floating $$ to be within the paragraph before it. It should align with the lasts line in the paragraph but it should be floated to right.

How can this be done? Please note that I have to solve this problem under the constraint that I can not float the paragraph element that comes before the div element. I can do whatever I want with the DIV element though. I can also move around the DIV element to some other part of the code if necessary.

Answer 1

Given your new information that you want it at the bottom right of the paragraph, see this live example: http://jsfiddle.net/AGEus/1/

In short:

1. Make the <div> a <span> and place it as a child of the paragraph.
2. Make the paragraph position:relative (so that it establishes its own coordinate system)
3. Put some padding in the paragraph on the right side so that the contents of .end won't overlap the text.
4. Absolutely position and size the .end to the bottom right of the paragraph.

HTML:

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  <span class="end">$$</span>
</p>

CSS:

p      { position:relative; padding-right:2em }
p .end { position:absolute; right:0; bottom:0; width:2em }
​

Answer 2

Replacing the DIV with a SPAN, and moving the inside the P seems to work. You can optionally set the SPAN to inline-block depending on the contents.

If you put the SPAN before the text, it will be near the top. If you put it after, it will be at the bottom.

demo