title: Position of absolute child element relative to grandparent, not parent... and child should remain hidden until clicked
body: <p>Child span element should be hidden until clicked; after it's revealed child should be all the way left and 80% width of the screen size, relative to grandparent, not parent.</p>
  
  <p>This is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Text text text text
  
  &lt;span style="position: relative; display: inline-block; vertical-align: top; background: #dddddd; overflow: hidden;" onclick="this.style.overflow='';" onmouseout="this.style.overflow='hidden';"&gt;(activeword)
  &lt;span style="position: absolute; background: white; border: 1px solid black;"&gt;
  
  &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Lorem ipsum, big text here, dolor sit amet, consectetur adipiscing elit.
  &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Lorem ipsum, second even bigger text here, dolor sit amet, consectetur adipiscing elit.
  
  &lt;/span&gt;
  &lt;/span&gt; 
  
  text text text end of paragraph text.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>(Notes: Can't use external CSS; can't use pseudo-elements as they can't go inline)</p>