Resize pre element by dragging

Question

I'd like the user to resize the pre 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 textarea I am using now stackoverflow, but only to read the text written in the pre more effectively.

This is the simple piece of AngularJS code

<div class="container">
    <div class="jumbotron">
        <div class="row">
            <div class="col-md-6">
                First variable
                <pre>{{first}}</pre>
            </div>
            <div class="col-md-6">
                Second variable
                <pre>{{second}}</pre>
            </div>
        </div>
    </div>
</div>

The css bit associated with the pre is the following

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;
};

What I would like to have is to be able to resize the height of either pre to show more content.

I took a look at this example thinking that I can maybe work on resizing the divs containing the pre. Unfortunately I cannot make it work, but I am not even sure that was the right way.

Answer 1

Give the pre these rules:

pre {
  resize: both;
  overflow: auto;
}

Snippet

pre {
  resize: both;
  overflow: auto;
  height: 70px;
  width: 150px;
}

<pre>#include "me.h";
#include "conio.h";</pre>