title: Avoid element wrapping on expanded hover-state
body: <p><strong>The current Fiddle:</strong> 
  <a href="https://fiddle.jshell.net/Benihana77/cjtg5ojf/" rel="nofollow noreferrer">https://fiddle.jshell.net/Benihana77/cjtg5ojf/</a></p>
  
  <p><strong>The setup:</strong>
  We have a flexible promo, where both the main text and the button/link text are variable in length. The button/link is inline, with an extended arrow at the end that grows a set amount (20px) on hover. </p>
  
  <p><strong>The problem:</strong>
  Because both variables are very flexible, we can run into scenarios where the button/link with arrow may be thin enough to fit on the same line as the main text, but on hover, will run into the padding and pop down. That is, of course, a real bad experience. I can handle it when it's already too wide to fit, but not when it doesn't fit <em>only on hover</em>.</p>
  
  <p><strong>What I'm trying to figure out:</strong>
  Is there a way to effectively "pad" the button? I.e., whatever its width (which is variable) + that 20px, so that if it <em>would</em> be too wide when hovered, it'll just automatically be on its own line beforehand? </p>
  
  <p>I've tried calc(), but I know that's not really how that works. white-space: no-wrap and overflows have other, undesired effects. I know this is super easy with JS (just detect width, add the 20px, badda bing badda boom), but I'm hoping to avoid that dependency. </p>
  
  <p><strong>Worst case:</strong>
  I either use JS, or just force it to a second line. </p>
  
  <p>Thanks for any help!</p>