Как реализовать плавное выпадение текста?

Я сделал при клике на кнопку, чтобы высота блок плавно увеличивалась как в красном блок, только мне надо чуток сделать по другому, у меня есть желтый блок, у меня должно отображаться только первая строчка все остальное предложение должно быть ... в трех точках и когда я нажимаю на кнопку я бы хотел, чтобы оно также плавно опускалось как и красный блок, а не сразу весь текст отображался?
snippet

Дополнительно:

удалить overflow: visible;

а для многоточия у класса qwe нужно делать обрезание текста

.second__wrapper .qwe{ ... } .second__wrapper.open .qwe{ ... }

• snippet
  Не сильно понял , когда я добавил white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; для класса .qwe у меня вообще пропал текст из видимости , а мне надо , чтобы условно отображалась одна строчка , и она обрезана троеточием , а когда я добавляю open троеточием убирается и выпадает весь текст ?
• Old_Chicken,

  .second__wrapper { width: 200px; background: yellow; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s ease; } .qwe { min-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .second__wrapper.open { grid-template-rows: 1fr; } .second__wrapper.open .qwe{ white-space: wrap; }

  .second__wrapper { width: 200px; background: yellow; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s ease; } .qwe { min-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .second__wrapper.open { grid-template-rows: 1fr; } .second__wrapper.open .qwe{ white-space: wrap; }