Как изменить текст в меню, которое при наведении выезжает вправо

У меня есть задание сделать меню, которое при наведении на него курсора мыши плавно выезжает вправо и в части которая выдвигается будет какая-то информация, но щас у меня есть проблема с текстом, текст выводится в одной строке и из-за этого слова непонятные, как решить эту проблему исходя из моего кода

HTML

<div>
    <p class="p">Обратная связь</p>
</div>

CSS

* {
  margin: 0;
}

div {
  font-size: 20px;
  writing-mode: vertical-lr;
  background-color: orange;
  margin-top: 400px;
  position: fixed;
  border-radius: 0 5px 5px 0;
  padding: 0;
  height: 130px;
}

div:hover {
  width: 300px;
  background-color: rgb(33, 32, 36);
  position: right;
  height: 138px;
}

div:hover .p {
  position: relative;
  right: -275px;
}

div:hover::after {
  writing-mode: initial;
  content: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, eligendi!";
  color: white;
}

p {
  background-color: orange;
  padding: 4px 2px;
  border-radius: 0 5px 5px 0;
  height: 130px;
}