title: Need to expand multiple lines with javascript, text overflow
body: <p><a href="http://jsfiddle.net/10h8t3ah/" rel="nofollow">http://jsfiddle.net/10h8t3ah/</a></p>
  
  <pre><code>function changeHeight(rowNum) {
    document.getElementById("demo").style.height= "70px";
    var fooBar = document.getElementById(rowNum);
    fooBar.style.height = "100px";
  }
  </code></pre>
  
  <p>What I am trying to accomplish here is to pass through a variable defined as row1, row2, row3, and row4 as rowNum and it will change the height of both the link and the paragraph with the corresponding row#.</p>
  
  <p>I am trying to pass the ID of both the paragraph and the link so that if you hover over the link and vice versa, the height will change.</p>
  
  <p>Essentially, if you hover over either the link or the paragraph, the corresponding containers side by side of each other will expand in height and the text in the paragraph will be visible. The paragraph text I have set with wrap-text property of break word but it seems to just overflow out anyway.</p>