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>
    <img class="float">
    ....
  </p>
</div>
.wrapper {
  display: flex;
}
.float {
  float: right; 
  height: 100%; 
  width: 100px;
  shape-outside: inset(calc(100% - 100px /*height */) 0 0);
  object-fit: contain;
  object-position: bottom;
}

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

More CSS Tips