title: Can't get <img> title attribute to stick under the <img> using jquery + css
body: <p>I'm using <code>jquery</code> to grab the <code>img</code> title attribute from images in posts on my page.
  The images are always wrapped in <code>&lt;p&gt;</code> tags by default and have different kinds of floats.</p>
  
  <p>My solution was to grab the image style and add it to a corresponding <code>&lt;small&gt;</code> tag and then use a css <code>position</code> to <code>align</code> it correctly. </p>
  
  <p>I have spent last two hours trying different approaches, and now I'm out of options.
  Can someone help me with this?</p>
  
  <p>here is my code as it stands now.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("p img").each(function(index, element) {
      $(element).wrap("&lt;div class='imgWrapper'&gt;&lt;/div&gt;");
  });
  
  
  $('img[title], img[style]').after(function() {
    return `&lt;small style="${this.style.cssText}"&gt;${this.title}&lt;/small&gt;`;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container{
    margin: 0px 100px;
  }
  
  .imgWrapper{
  
  }
  
  img{
  border: 1px solid #000;
  }
  
  img + small {
    color: #C00;
    display: block;
  }
  
  small{
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="custom.css"&gt;
  &lt;div class="container"&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
  &lt;p&gt;
    &lt;img style="float: right;" title="Some image title" src="img.jpg" alt="Some image alt" width="656" height="210" /&gt;
  &lt;/p&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
  &lt;p&gt;
  &lt;p&gt;
    &lt;img style="float: left;" title="Title title" src="img.jpg" alt="Title title alt" width="325" height="210" /&gt;
  &lt;/p&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
  &lt;p&gt;
  &lt;p&gt;
    &lt;img style="float: right;" title="titletitletitle" src="img.jpg" alt="titletitletitle alt" width="656" height="210" /&gt;
  &lt;/p&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
  &lt;p&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>