Как сделать обтекание текста и прижать текст и картинку к низу?

Question

[rndjester]

https://yadi.sk/i/rJ9WknNxfIGnDA - красным выделен блок, где нужно сделать обтекание текста, но еще текст должен быть прижат к низу, вместе с элементом который нужно обтекать (стрелочку), пробовал и флоат и грид, но все ничего, сейчас сделано Position absolute, bottom: 0, right: 0. Но возникает вот такая ситуация - https://yadi.sk/i/uoF4harzN5_qyQ, люди добрые помогите,

<div class="text-block">
                        <div class="title">
                            <div class="name">Тут прикольный заголовок который надо сместить вниз или нету </div>
                            <div class="arrow">
                                <img src="/local/img/icons/arrow-popular.svg" alt="arrow" class=arrow-img">
                            </div>
                        </div> 
                        <div class="price">Тут уже совсем другой блок</div>
             </div>

.text-block {
            text-align: left;
}
.title {
            display: flex;
            align-items: flex-end;
            position: relative;
}
.name {
            display: flex;
            align-items: flex-end;
            font-size: 16px;
            width: 100%;
            line-height: 24px;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: #515151;
            margin-bottom: 8px;   
            box-sizing: border-box;
}
.arrow {
            position: absolute;
            right: 0;
            height: 36px;
}
.description {
            font-size: 14px;
            line-height: 18px;
            overflow: hidden;
            color: #8A8A8A;
            margin-bottom: 8px;
            box-sizing: border-box;
}
.price {
            font-size: 16px;
            color: #515151;
            font-weight: 500;
}
.price>span {
                font-size: 12px;
                font-weight: normal;
}

Answer 1

[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 и вставить фоновым изображением стрелочку, а также настроить размеры самого блока под размеры кнопки.

Result

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

Comments

[rndjester]

Тут предполагается большое колличество карточек, и заголовки у разных карточек разной высоты, я на js считаю самую большую высоту и присваиваю всем заголовкам, естественно есть заголовки меньшего размера, поэтому если заголовок меньше он должен быть прижат к низу align-items: flex-end

[g33km]

rndjester, понял. Мое решение с псевдоэлементом оказалось полезным, или все равно не получилось решить задачу?

[rndjester]

Не прошел и месяц) нет, не помогло, сайт запустили без этого решения, но спасибо)