Добрый день. Нужна помощь с корректным свертыванием текста вместе с блоком

.box {
  display: flex;
  border-radius: 20px;
  width: 60px;
  height: 60px;
  background: #f0f0f0;
  box-shadow:  0 0 0 #cccccc,
               0 0 0 #ffffff,
                10px 10px 10px #cccccc inset,
                -10px -10px 10px #ffffff inset;
  animation: anime 20s cubic-bezier(0.16, 1, 0.3, 1) 1s infinite alternate;
}

.imgmodul {
  padding: 20px;
  width: 30%;
  height: 100%;
  size: cover;
}

.text-modulwindow {
  position:relative;
  padding: 20px;
  width: 70%;
  height: 100%;
}

.headline-modul {
  margin-top: 2%;
  display: flex;
    justify-content: center;
    font-family: "Mont";
    background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

.description-modul {
  padding: 3%;
  overflow: hidden;
  text-align: justify;
  text-overflow: clip;
  font-size: 16px;
    line-height: 25px;
    font-family: "DidactGothic";
    background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

@keyframes anime {
  0% {
    width: 60px;
    height: 60px;
    background: #f0f0f0;
    box-shadow:  0 0 0 #cccccc,
                 0 0 0 #ffffff,
                  10px 10px 10px #cccccc inset,
                  -10px -10px 10px #ffffff inset;
  }
  5% {
    width: 60px;
    height: 60px;
    background: #f8f8f8;
    box-shadow:  10px 10px 10px #cccccc,
                 10px 10px 10px #ffffff,
                 0 0 0 #cccccc inset,
                 0 0 0 #ffffff inset;
  }
  10% {
    width: 60px;
    height: 300px;
    background: #f8f8f8;
    box-shadow:  10px 10px 10px #cccccc,
                 10px 10px 10px #ffffff,
                 0 0 0 #cccccc inset,
                 0 0 0 #ffffff inset;
  }
  20% {
    width: 1200px;
    height: 300px;
    background: #fafafa;
    box-shadow:  40px 40px 40px #cccccc,
                 0 0 0 #ffffff,
                 0 0 0 #cccccc inset,
                 2px 2px 2px #ffffff inset;
  }
  50% {
    width: 1200px;
    height: 300px;
    background: #fafafa;
    box-shadow:  40px 40px 40px #cccccc,
                 0 0 0 #ffffff,
                 0 0 0 #cccccc inset,
                 2px 2px 2px #ffffff inset;
  }
  100% {
    width: 1200px;
    height: 300px;
    background: #fafafa;
    box-shadow:  40px 40px 40px #cccccc,
                 0 0 0 #ffffff,
                 0 0 0 #cccccc inset,
                 2px 2px 2px #ffffff inset;
  }

<div class="box">
          <img class="imgmodul" src="https://www.proidea.hu/euro-purator-kft-229170/gerofit-r-vedobevonatos-csovek-354310/a_1_d_13_1563016092095_euro_purator_gerofit_r_vedobevonatos_csovek_miniatur_354310_0.jpg" alt="modulpnd">
          <div class="text-modulwindow">
            <h2 class="headline-modul">БЕЗНАПОРНЫЕ МОДУЛИ ПНД</h2>
            <p class="description-modul">Безнапорный модуль ПНД с резьбой предназначен для монтажа и безтраншейного ремонта безнапорных канализаций. Его стандартна длина 600мм и он имеет с одной стороны наружнюю длину, с другой - внутреннюю. Все соединения производятся с учетом кольцевой жесткости и выдерживают большую осевую нагрузку. Монтаж таких модулей очень прост и осуществляется путем вкручивания одного модуля в другой. Данный способ монтажа не трубует специальных квалификаций и дополнительного оборудования. По согласованию, возможно производство другой длины модуля. Модули ПНД отличаются диаметром и толщиной стенки. С полным списком безнапорных модулей ПНД вы можете ознакомится в прайсе.  </p>
          </div>
        </div>