title: Flexbox filling div with blank space when text split over two lines
body: <p>I have a flex container div with 2 elements - a title, and a "like" svg image that is vertically centered and is displayed just to the right of the title.</p>
  
  <p>When the title is too long to be displayed on one line, it seems to fill the title div with extra space on the right, so the image will not display immediately to the right of the split text.</p>
  
  <p>Here is what the HTML looks like: </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>.like-container {
    display: flex;
    align-items: center;
  }
  
  .like-div {
   font-size: 10px;
   margin-left: 20px;
   order: 1;
  }
  
  .title {
   font-size: 40px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="like-container"&gt;
        &lt;div class="like-div"&gt;
          &lt;svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
      viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve"&gt;
        &lt;metadata&gt;
         &lt;sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"&gt;
          &lt;slices/&gt;
          &lt;sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/&gt;
         &lt;/sfw&gt;
        &lt;/metadata&gt;
        &lt;path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653  c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/&gt;
        &lt;path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194  c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758  c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504  c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481  c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809  C268.403,168.538,290.992,168.011,278.918,147.336z"/&gt;
       &lt;/svg&gt;
          &lt;span&gt;Like&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="title"&gt;
          This is the very longish Title!
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have created a plnkr so that you can see what I mean: <a href="http://plnkr.co/edit/cPMp4sjIUTbX3ohMW4aI" rel="nofollow">http://plnkr.co/edit/cPMp4sjIUTbX3ohMW4aI</a></p>
  
  <p>Any ideas?</p>