Element resizable

HTML

<div id="element">Element resizable</div>
<div>Block1</div>
<div>Block2</div>

CSS

div {
  position: relative;
  float: left;
  overflow: hidden;
  background: blue;
  height: 200px;
  width: 200px;
}

#element {
  position: relative;
  overflow: hidden;
  background: green;
  height: 200px;
  width: 200px;
}

JavaScript

var element = document.getElementById('element');
var resizer = document.createElement('div');
resizer.className = 'resizer';
resizer.style.width = '10px';
resizer.style.height = '10px';
resizer.style.background = 'red';
resizer.style.position = 'absolute';
resizer.style.left = 0;
resizer.style.bottom = 0;
resizer.style.cursor = 'sw-resize';
element.appendChild(resizer);
resizer.addEventListener('mousedown', initResize, false);

function initResize(e) {
  window.addEventListener('mousemove', Resize, false);
  window.addEventListener('mouseup', stopResize, false);
}

function Resize(e) {
  element.style.width = (element.style.width - e.clientX - element.offsetLeft) + 'px';
  console.log((e.clientX - element.offsetLeft));
}

function stopResize(e) {
  window.removeEventListener('mousemove', Resize, false);
  window.removeEventListener('mouseup', stopResize, false);
}