title: Resize pre element by dragging
body: <p>I'd like the user to resize the <code>pre</code> elements in my AngularJS page by dragging the bottom border. The effect I aim to achieve is a very similar way to the way the <code>textarea</code> I am using now stackoverflow, but only to read the text written in the <code>pre</code> more effectively.</p>
  
  <p>This is the simple piece of AngularJS code </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="jumbotron"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-6"&gt;
                  First variable
                  &lt;pre&gt;{{first}}&lt;/pre&gt;
              &lt;/div&gt;
              &lt;div class="col-md-6"&gt;
                  Second variable
                  &lt;pre&gt;{{second}}&lt;/pre&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The css bit associated with the pre is the following</p>
  
  <pre><code>pre {
    tab-size: 2;
    text-align : left;
    height: auto;
    max-height: 240px;
    overflow: auto;
    word-break: normal !important;
    word-wrap: normal !important;
    white-space: pre !important;
  };
  </code></pre>
  
  <p>What I would like to have is to be able to resize the height of either pre to show more content.</p>
  
  <p>I took a look at this example thinking that I can maybe work on resizing the <code>divs</code> containing the pre. Unfortunately I cannot make it work, but I am not even sure that was the right way.</p>