title: Why does my text keep moving my image down?
body: <p>How can I wrap my "contenteditable" text around the image but prevent the image from moving down as the text proceeds to the next line?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.note {
    width: 280px;
    height: 130px;
    margin-left: 25px;
    padding: 2;
    word-break: break-word;
    font-family: Note;
    font-size: 20px;
    z-index: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="note" contenteditable="true"&gt;Pellentesque pharetra mi lacus, vitae rhoncus nulla hendrerit vitae. Vestibulum nec lectus sed tortor maximus commodo.
    &lt;span id='close' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'&gt;
      &lt;img src="http://lorempixel.com/40/40/abstract/1/" height="30" width="30" align="right" style="vertical-align: top; float: right"/&gt;
    &lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>