title: Position element horizontally relative to sibling without wrapping div
body: <p>I am styling a document produced by org-mode's <a href="http://orgmode.org/manual/HTML-export.html#HTML-export" rel="nofollow noreferrer">HTML exporter</a> to annotate paragraphs with footnotes appear directly adjacent to the content which they annotate, i.e:
  <a href="https://i.stack.imgur.com/r0R5W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r0R5W.png" alt="Sidenote HTML"></a></p>
  
  <p><a href="http://stefan-marr.de/papers/pldi-marr-et-al-zero-overhead-metaprogramming/" rel="nofollow noreferrer">original page</a></p>
  
  <p>Unfortunately, the orgmode HTML exporter (<code>ox-html</code>) only makes a clunky provision for wrapping a paragraphs, block or "section" in a <code>div</code> and so the default HTML structure that I am (mostly) stuck with.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;
    Item with footnote #1&lt;sup&gt;1&lt;/sup&gt;
  &lt;/p&gt;
  &lt;aside&gt;
    &lt;p&gt;Footnote #1: Should be right of previous paragraph&lt;/p&gt;
  &lt;/aside&gt;
  &lt;p&gt;
    Unrelated Content
  &lt;/p&gt;
  </code></pre>
  
  <p>Consequently, obvious solutions wrapping the <code>&lt;p&gt;</code> &amp; <code>&lt;aside&gt;</code> in a div and setting display <code>inline</code>/<code>table-cell</code> or <code>position: absolute</code> + padding will not work (to my knowledge).</p>
  
  <p>How can I style a section to be inline with it's previous sibling (but no further) or be absolutely positioned (horizontally) relative to it's <strong>sibling</strong>? </p>
  
  <h3>Summary &amp; Clarifying Remarks</h3>
  
  <ul>
  <li>The <code>aside</code> will be directly left of the previous sibling paragraph (<code>&lt;p&gt;</code>)</li>
  <li>All of the paragraphs and asides (footnotes) share the same parent element</li>
  <li>Without modifying <code>ox-html</code>, every <code>&lt;aside&gt;</code> will have a child <code>&lt;p&gt;</code></li>
  <li>I cannot wrap the <code>&lt;p&gt;</code> and <code>&lt;aside&gt;</code> in a <code>&lt;div&gt;</code> that will not be shared by all of the <code>&lt;p&gt;</code> elements</li>
  <li>I would like avoid <code>HTML_CONTAINER</code> or manually wrap every single footnote and associated paragraph in yet another <code>#+BEGIN</code>/<code>#+END</code> block</li>
  </ul>
  
  <blockquote>
    <p>If you are familiar with org-mode or ox-html, here is the original format I would like to export from.
    </p>
  
  <pre><code>Item with footnote[fn:1]
  #+BEGIN_aside
  [fn:1] Footnote #1: Should be right of previous paragraph
  #+END_aside
  Unrelated content
  </code></pre>
  </blockquote>