title: Place 'floating' contents at the bottom right of a paragraph of text
body: <p>Here is the code: <a href="http://jsfiddle.net/ym2GQ/" rel="nofollow noreferrer">http://jsfiddle.net/ym2GQ/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>p {
    background: lightblue;
  }
  
  .end {
    background: orange;
    float: right;
    display: inline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
    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.
  &lt;/p&gt;
  &lt;div class="end"&gt;$$&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want the floating <code>$$</code> to be within the paragraph before it. It should align with the lasts line in the paragraph but it should be floated to right.</p>
  
  <p>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.</p>