g33km

<div class="text-block">
  <div class="title">
    <div class="name">Тут прикольный заголовок который надо сместить вниз или нету eshkersad sadsad sadasd asdsadsad sadsadsad sadsad asdsad asdsadsad</div>
  </div>
  <div class="price">Тут уже совсем другой блок</div>
</div>

* {
  box-sizing: border-box;
}

.text-block {
  max-width: 300px;
}

.name {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #515151;
}

.name::after {
  content: "";
  display: inline-block;
  float: right;
  width: 50px;
  height: 20px;
  margin: 5px 0 0 5px;
  background: red;
  cursor: pointer;
}

.price {
  font-size: 16px;
  font-weight: 500;
  color: #515151;
}

В .name::after необходимо будет убрать красный background и вставить фоновым изображением стрелочку, а также настроить размеры самого блока под размеры кнопки.

Один вопрос: что значит "текст должен быть прижат к низу"?

Один из вариантов: Codepen
объявляем переменную высоты внутренних блоков (ибо величина динамическая)

:root {
--block-height: 50px;
}

Обертке добавляем свойство
height: calc(var(--block-height) * 3 + 12px));

Теперь высота блока-обертки будет подстраиваться под высоту блоков внутри с учетом их margin-ов (у вас указано для всех блоков margin:2px всего верхних и нижних отступов получается 6, сами блоки - 50px высотой, три блока в колонке, отсюда суммарная высота блока будет 50px*3 + 2px*6=162px)

А дальше (если это возможно через js или другими способами) меняем значение css-переменной --block-height на необходимое значение, таким образом управляем высотой внутренних блоков.

quote_animation не работает по причине того, что вы не указали ему относительное позиционирование
position: relative;
По этой причине блок никуда не сдвигается

Затем, присутствует большая ошибка - вы несколько раз переназначили
@keyframes quote_animation

@keyframes quote_animation {
                0% { left: -200px; }
                100% { left: 200px; }
             }      
             @keyframes quote_animation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    
}
@keyframes quote_animation {
    0% { top: 0px; }
    100% { top: -360px; }
}

Как я понял, вы хотели, чтобы вначале надпись сдвигалась влево-вправо, затем проворачивалась на 360 градусов и после этого поднималась на 360px (либо все это должно происходить одновременно). Так вот все эти действия должны быть внутри одного @keyframes, в данном случае анимация будет выполнять только по заданным ниже всех правилам, то есть

@keyframes quote_animation {
    0% { top: 0px; }
    100% { top: -360px; }
}

Опять-таки, ничего не происходит по причине того, что вы не задали относительное позиционирование.

Кейфрейм img_animation вообще ни к одному объекту не применяется, поэтому ничего не происходит.

У вас достаточно плохо написан код, начиная от неаккуратности, заканчивая ошибками непосредственно в коде. К примеру, в свойствах, применяемых к селектору #frame, не поставлена точка с запятой после
height:600px

Думаю, если покопаться в коде глубже, там найдется еще много чего нехорошего.
Успехов!