Выровнять дно текста с плавающими изображениями ⇐ Html

[Anonymous]

I'm trying to have my text wrap nicely around two images, but I'd like the text to be aligned at the bottom of it's content (the last line touching the bottom margin of the wrapper).

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

.wrapper {
display: flex;
width: 320px;
height: 270px;
background-color: #c1bea6;
}

.box {
text-align: justify;
font-size: 20px;
align-content: end;
}

.img-right {
float: right;
height: 100%;
width: 100px;
margin-left: 15px;
object-fit: contain;
object-position: bottom;
shape-outside: inset(calc(100% - 100px) 0 0);
}

.img-left {
float: left;
width: 100px;
margin-right: 15px;
object-fit: contain;
object-position: top;
shape-outside: inset(calc(100% - 100px) 0 0);
}






[img]https://picsum.photos/id/1080/100/100[/img]
[img]https://picsum.photos/id/1079/100/100[/img]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna.

Код выше приводит к этому


Подробнее здесь: https://stackoverflow.com/questions/797 ... ing-images