Flotar abajo a la derecha.

[kseso?]

Hola Furoya
En primer lugar mis disculpas por el tiempo transcurrido.

Mi primera acción fue picar un poco de código para probar un par de ideas, que ya suponía a priori que fracasarían (jugar con position, márgenes contrarrestados con paddings, translate y algunas más de css 3).

Pero decidí un acercamiento teórico y he llegado a la conclusión que lo que planteas se escapa a las competencias y posibilidades de css. Espero que si estoy equivocado, haya un alma caritativa que nos alumbre :)

Mi planteamiento y porqué de mi afirmación anterior:
El navegador coloca cada elemento según va apareciendo en el html. Si hay estilos declarados los aplica.
Para modificar la distribución de los elementos sólo hay dos formas: sustraerlos del flujo (el resto de elementos se comportan como si el afectado no estuviese) o respetar el flujo y añadir alguna regla que fuerce algún movimiento manteniendo el orden de aparición.

En el "reto" que propones hay una doble modificación de posición en el eje x e y.
Para ello tenemos básicamente dos caminos:
1º:-> Si queremos mantener "la presencia y efectos" de la imagen sobre su hermano (el propio texto de /p/) sólo podríamos flotarla para llevarla a la derecha (eje x) y añadir un margen superior (eje y). Pero sabemos que el margen forma parte de la propia imagen, con lo que el texto respetará ese espacio "vacío" en la parte superior. Las letras ya no llegarán hasta el borde derecho de la imagen, así que no merece la pena el segundo paso: cómo hacer para que la parte inferior de la imagen quede alineada con la parte inferior de las palabras.

2º:-> Desplazarla sin mantener "su presencia y efectos". Esto es, sacarla del flujo (position). Rápido, eficaz. Pero... ya sabemos qué ocurre con las palabras de /p/. No "saben" de la imagen y se comportan como si no estuviese. Se sobreponen unas sobre la otra (o al verres).

¿Y qué hay de las propiedades de la versión 3 como translate y otras?
Pues nada que hacer. Porque simplemente afectan "a la visualización" del elemento. El resto de propiedades siguen ahí actuando.
Me explico: si a la imagen la flotamos a la derecha y declaramos un translate(X,Y), para las palabras sólo existe la pic a la derecha, la traslación la ignoran. Por lo tanto dejan el hueco en la parte superior derecha y se superponen allá donde se visualice la imagen.

Y todo lo anterior, para recordar que css no es un lenguaje de programación (por lo tanto no realiza cálculos y mucho menos maneja variables condicionadas a o por terceros, con alguna pequeña excepción) , sólo aplica estilos definidos a las etiquetas del html identificadas, y no es poco lo que se puede lograr con ello. Pero evidentemente hay casos y situaciones que deben manejarse y prevenirse por otros métodos.