Poner alto auto ajustable a cada tab

[ceaped]

Buenos días
Utilizo esta galería:
https://codepen.io/frxnz/pen/arlxL

Pero cada "tab" tiene diferente alto.

Código CSS:

.slides .slide {
    position: absolute;
    top: 0;
    width: calc(20% - 1em);
    max-height: 3.5em;
    margin: 0.5em;
    padding: 0;
    color: black;
    float: left;
    overflow: hidden;
    background: #FFF;
    transition: max-height 0.25s
    ease-in-out, width
    0.25s 0.25s ease-in-out, left
    0.25s 0.5s  ease-in-out, top
    0.25s 0.75s ease-in-out;
}
 

Código CSS:

.slides .slide.active {
    width: 100%;
    max-height: 20em;
    float: none;
    position: absolute;
    top: 4.5em;
    left: 0;
    background-color: #FFF;
    transition: 
        top        0.25s 1s    ease-in-out,
        left       0.25s 1.25s ease-in-out, 
        width      0.25s 1.5s  ease-in-out, 
        max-height 0.25s 1.75s ease-in-out;
}
 

¿Cómo hago para que cada "tab" su alto se ajuste a su contenido?

Gracias por su ayuda