Esto funciona muy bien:

<style type="text/css"> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
    }

    div:hover
    {
    width:300px;
    }
    </style>

Pero, ¿alguien sabe cómo hacer esto con un clic en lugar de desplazarse? ¿Y no involucrando a JQuery?

¡Gracias!