title: Keep heading (h1, h2...) from going full width on line break
body: <p>I have headings that have <code>display:inline-block</code> set, but one of them is really long and takes two lines. The issue is that when it breaks to the second line, it automatically makes it take the whole width of the parent container (even though it has plenty of space around it, and it is set to inline-block).</p>
  
  <p>Anyone knows how to prevent this? Also, I can't really use a solution that only applies to this one if it will break other headings, because the same code is generating other 9 non-line-breaking headings using the same structure.</p>
  
  <p>Thank you for your time.</p>
  
  <p>CodePen: <a href="https://codepen.io/anon/pen/gGdYmB#anon-signup" rel="nofollow noreferrer">https://codepen.io/anon/pen/gGdYmB#anon-signup</a></p>
  
  <pre><code>&lt;div id="parent1" class="parent"&gt;
    &lt;h2&gt;SHORT HEADING&lt;/h2&gt;
    &lt;h2&gt;THE REALLY LONG HEADING THAT 
    &lt;span&gt;BREAKS TO A SECOND LINE&lt;/span&gt;&lt;/h2&gt;
  &lt;/div&gt; 
  
  &lt;style&gt;
  .parent {
     width:50vw; 
     background-color:#046; 
     height:20vw; 
     text-align:center;
  }
  .parent h2 {
     display:inline-block;
     color:#fff;
     font-family:sans-serif;
     font-weight:900;
     font-size:2vw;
     background-color:#28a;
     padding:10px 0;
  }
  .parent h2 span {
      display:inline-block
  }
  &lt;/style&gt;
  </code></pre>