Creating a div with dynamic height and an arrow facing inwards using CSS

I have created the below arrow div with CSS pseudo elements. It is working fine for the fixed height but when I set its height to auto and increase the text it becomes like this. Now is it to set the arrow in a way that it increases its height with the text.

We can do this by using jQuery but is it possible to do it in CSS only?

.label-box-st1::after {
  border-bottom: 73px solid #800080;
  border-right: 45px solid rgba(0, 0, 0, 0);
  border-top: 73px solid #800080;
  content: "";
  position: absolute;
  right: -43px;
  top: 0;
  width: 20px;
}