Решение найдено
https://codepen.io/anon/pen/xopBZw


блок сверху светло-фиолетовый (фон добавила для наглядности, так разумеется он прозрачный) это :before
со стилями:

{  
  min-height: 20px;
    max-height: 80px;
    flex-grow: 8;
    width: 100%;
}

т.е. от текста до верхней и нижней границы блока .box (тот, что с розовым border) одинаковое расстояние (стрелки) вне зависимости от количества текста, если нет переполнения.
При переполнении верхний блок сжимается

Владимир Проскурин уже ответил вам, как следует адекватно сделать, но если Вы захотите немного псевдоэлементов и оставить структуру кода html, как есть, то переходите по ссылке)

https://codepen.io/anon/pen/dBKeaz

Вот так должно работать

.SliderPanel > .slick-list >.slick-track > .slick-slide {
  display: block;
  opacity: .1;
  transition-delay: 0s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-out;
}

.SliderPanel > .slick-list > .slick-track > .slick-current {  
  display: block;
  opacity: 1;
  transition-delay: 0.3s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}

/* на всех разрешениях больше 1368рх  28px; */
.title {
    font-size: 28px;
  }

/* на разрешении от  1368рх до 769px будет шрифт 24px; */
@media screen and (max-width: 1368px) {
  .title {
    font-size: 24px;
  }
}

/* на разрешении от 768px и ниже будет шрифт 20px; */
@media screen and (max-width: 768px) {
  .title {
    font-size: 20px;
  }
}