css toggle with transition effect for expanding div – set max-height to infinity alternative

There is a simple html+css+js code to expand/collapse div with a 1-second effect.

https://jsfiddle.net/zf1rd38y/3/

Css code looks simple:

.smalldesc {
  max-height: 52px;
  overflow: hidden;
  transition: all 1s ease;
  border: 1px solid red;
}

.smalldesc.expand {
  max-height: 150px;
}

The issue is here you see the max-height has a fixed value for .smalldesc.expand (but if the text is long enough, then not all text is displayed when expanded).
If I set max-height: none; instead, then transition: all 1s ease; doesn’t work.

Any ideas how to make it perfectly work for a very long text?