title: CSS triangle with dynamic height
body: <p>Wondering if anybody can help with a css problem I'm having.. see this jsbin:
  <a href="http://jsbin.com/uviyat/2/edit" rel="nofollow">http://jsbin.com/uviyat/2/edit</a></p>
  
  <p>Notice ‘Longer Wording Example’ – how can I get the triangle arrow indicator to scale vertically to dynamically fill the selected blue area height? (The triangle is generated in the last css rule..)</p>
  
  <p>I’m stumped! Anybody got any ideas?</p>
  
  <p>Thanks in advance..</p>
  
  <p><strong>EDIT</strong> - since Zoltans's answer, I've had a go with Jquery here:
  <a href="http://jsbin.com/uviyat/12/edit" rel="nofollow">http://jsbin.com/uviyat/12/edit</a>
  Not sure if its the best way to do it? Where does the value '16' come from?</p>