Efecto maximizar/minimizar contenedores

[marodal]

Hola a todos!!

Tengo varios divs y un span que separa cada uno de ellos. Quiero que pulsando dicho span y arrastrando, pueda aumentar o disminuir el resto.
Para simplificar, supongamos que tengo dos divs, alineados verticalmente (uno encima del otro), y un elemento span contenido al final del div de arriba, que va a servir como separador. Lo que quiero es que al pinchar y arrastrar este span hacia arriba o abajo, el height de cada contenedor aumente o disminuya.

¿Alguna idea de como podría solucionarlo?

Un saludo

[bathorz]

¿Tiene que ser con Jquery? ¿No te sirve resize de css?

Código HTML:

<style type="text/css">
  .div1,.div2{
    border: 2px solid;
    padding: 10px; 
    width: 300px;
  }
  span{
    display:inline-block;
    border: 1px solid;
    padding: 5px;
    resize: vertical;
    overflow: auto;
  }         
</style>
<div class="div1">1<span>span</span></div>
<div class="div2">2<span>span</span></div>
 

O aplicar al div directamente

Código CSS:

.div1,.div2{
    border: 2px solid;
    padding: 10px; 
    width: 300px;
    resize: vertical;
    overflow: auto;    
  }