Исчезновение текста в нижней части раздела с прозрачным div, но высота остается под разделом после наложения div

Я пытаюсь получить хороший эффект затухания -в нижней части раздела текста в качестве индикатора «читать дальше».

Я следил немного за этим и другими руководствами,и мой код в настоящее время выглядит следующим образом:

html

    
malesuada fames ac turpis egestas...leo.
                                                                  
    
malesuada fames ac turpis egestas...leo.
    


Stuff after

CSS

.fadeout {
    position: relative; 
    bottom: 4em;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
} 

jsFiddle

Проблема в том, что даже когда я помещаю прозрачный div поверх основного текста, 4em пространства все еще существуют между и «Другие вещи».

Любые идеи?