Ciao, non so se sei riuscito ad elaborare già qualcosa. Nel tuo fiddle vedo comunque che non hai rimosso i vari errori di validazione, inutile ripeterti che sarebbe meglio farlo

Per la richiesta in questione, una soluzione può essere l'uso di max-height come già accennato.

Prova magari in questo modo:
- avvolgi l'intero contenuto dentro un opportuno <div> a cui applichi una classe specifica per questa effetto, ad esempio:

codice HTML:
<div class="espandibile">
  Qui tutto il contenuto che vuoi rendere espandibile
</div>

- rimuovi "overflow: hidden;" che hai definito nel CSS per il contenitore div .SX, altrimenti il contenuto resterebbe limitato a questo div vanificando il risultato;

- quindi aggiungi qualcosa di simile a questo:
codice:
    .espandibile {
      position: relative;
      overflow: hidden;

      max-height: 100%;
      background-color: #000;
      z-index: 0;
      box-shadow: 0 0 0 0 #fff;

      transition: 1s ease-in-out;
    }

    .espandibile:hover {
      max-height: 1000%;
      background-color: #123;
      z-index: 999;
      box-shadow: 0 0 8px 2px #fff;
    }

Chiaramente puoi personalizzare le varie proprietà come meglio credi (io ho voluto applicare un background e un box-shadow per dare risalto quando il div è espanso), fai solo attenzione ad alcune proprietà (come position, overflow, z-index) che dovrebbero restare tali perché sono funzionali per l'effetto da ottenere durante la transizione.

Fai sapere, buon proseguimento