CSS Tip

Float an element to the bottom corner

Make an element float to the bottom corner of your text content

An image float at the bottom corner of the text

<div class="wrapper">
  <p>
    <span class="float"><img src="" alt=""></span>
    ....
  </p>
</div>
.wrapper {
  display: flex;
}
.float {
  float: right; 
  height: 100%; 
  margin-left: 15px;
  display: flex; 
  align-items: flex-end; 
  /* 100px = image height */
  shape-outside: inset(calc(100% - 100px) 0 0); /* (6) */
}

See the Pen Float element to bottom corner by Temani Afif (@t_afif) on CodePen.

More detail: css-tricks.com/float-an-element-to-the-bottom-corner