Эллиптический размер текста перед элементом динамической ширины ⇐ CSS

[Гость]

Я хотел бы, чтобы многострочный текст располагался в форме эллипса в последней строке перед элементом с динамическим размером. И что элемент выровнен по правому краю.
например (где XX представляет необязательное изображение с переменной шириной)
Нет динамического элемента:

Код: Выделить всё

This is a short
paragraph with
text that ov...

С элементом и длинным текстом:

Код: Выделить всё

This is a short
paragraph with
text th...  XX

С элементом и более коротким текстом:

Код: Выделить всё

This is a short
paragraph that
wraps       XX

Код: Выделить всё

This is a short
paragraph
XX

Я пробовал разные способы, включая помещение изображения в контейнер с помощью display: inline-block или позиционирование его с помощью Position:absolute, но я не могу заставить его работать, как указано выше. Я даже не могу заставить его работать с выравниванием по левому краю текста.
В абзаце есть такой CSS:

Код: Выделить всё

.description {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}

И сейчас HTML выглядит так:

Код: Выделить всё

the paragraph text

В идеале я хотел бы сделать это с помощью только CSS, но при необходимости я буду рад использовать JS

Подробнее здесь: https://stackoverflow.com/questions/781 ... th-element