title: Stack div on top of each other with text overflowing to top
body: <p>Here is the layout</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
    &lt;div id="div1"&gt;
      &lt;span&gt; Hello&lt;/span&gt;
    &lt;/div&gt;
    &lt;div id="div2"&gt;
    &lt;span&gt; Content in this box should be pushed to the top as you reduce page size&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have two divs div1 and div2 wrapped in a wrapper. The wrapper should be psitioned at the bottom left corner of the window. When a user resizes their window i would want the text in div 2 to overflow top the top instead of the default of moving the text the next line ( downwards) I want to text to move to the previous line ( upwards) and essentially push the Hello in div 1 upwards.</p>
  
  <p>Basically the reverse of having top div stacked to the top and having the content pushed down as the screen is resized.</p>
  
  <p>Image that the dashed line is the bottom of the window, thenI would want the behavior like so</p>
  
  <pre><code>  Hello
    Content in this box
    should be pushed to
    the top as you reduce
    page size
    ---------------------
  </code></pre>
  
  <p>However currently the div follow the normal behavior of sending the overlowed text to the next line like so ( Behavior I dont want)</p>
  
  <pre><code>   Hello
     Content in this box should
     ------------------------
     be pushed to the top as you
     reduce page size
  </code></pre>