title: Need help/suggestions to set max-width of 1st line of h1 to avoid overlapping absolutely positioned element
body: <p>Below is what my design looks like</p>
  
  <p><a href="https://imgur.com/cEWyb.jpg" rel="nofollow noreferrer"><img src="https://imgur.com/cEWyb.jpg" alt=""></a></p>
  
  <p>however with a long title, it looks like</p>
  
  <p><a href="https://imgur.com/DCYsd.jpg" rel="nofollow noreferrer"><img src="https://imgur.com/DCYsd.jpg" alt=""></a></p>
  
  <p>How might I avoid the overlap? I created a fiddle to allow you to work on this (if you prefer)</p>
  
  <p><a href="http://jsfiddle.net/xhp7Q/" rel="nofollow noreferrer">http://jsfiddle.net/xhp7Q/</a></p>