title: Make a p have the same width/height as an image that is placed in another div
body: <p>I am trying to make a p always have the same width and height as an image that is placed next to it. </p>
  
  <p>I set specific dimensions to both of the divs containing those elements, and then set the img width and height to 100% (as mentioned <a href="https://stackoverflow.com/questions/9556514/change-image-size-via-parent-div">here</a>). Unfortunately that led to images getting distorted even if I used the dimensions of the actual images being provided. Forgot to mention that I use Picturefill by the way, perhaps it has something to do with that..</p>
  
  <p>I should mention that it is possible to somewhat control the amount of distortion, by adjusting the values in the <em>sizes</em> attribute of the picturefill HTML. However it turned out that I would have to add thousands of different values to that attribute to actually make it work this way. It just didn't really feel like the correct approach to something like this.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt; 
    &lt;img 
       sizes="(min-width: ...px) ...vw, (min-width: ...px) ...vw etc"
       srcset="/images/img1.jpg 280w,
               /images/img2.jpg 350w"
       alt="..."&gt;
  &lt;/div&gt;
  
  &lt;div&gt; 
   &lt;p&gt; ... &lt;/p&gt; 
  &lt;/div&gt;
  </code></pre>