title: CSS flex - is it possible to vertically align <h1> and <p> next to an <img> without using containers
body: <p>A very common element containing an image, title and text is</p>
  
  <pre><code>&lt;div class="mediaelement"&gt;
  &lt;img src="http://placekitten.com/g/500/500" /&gt;
  &lt;h1&gt;The title. Unknown length.&lt;/h1&gt;
  &lt;p&gt;And the description. Which could also span multiple lines.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now display: flex appears to be a very flexible way to center and display items. E.g with the order property I could move the title before the image without touching dom.</p>
  
  <p>But is it possible to align both the h1 and p vertically to the image without putting the into another container? Using only css?</p>
  
  <p>Like this: <a href="https://imgur.com/draDl2q" rel="nofollow noreferrer">http://imgur.com/draDl2q</a></p>
  
  <p><a href="https://i.stack.imgur.com/3Rs0b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3Rs0b.png" alt="example"></a></p>
  
  <p>If i put them into a container, I cannot move the h1 before the image with the flex order value.</p>