<h1>Resize the below div!</h1>
<div class="wrapper">
  <p class="box"><span class="float"><img src="https://picsum.photos/id/1/150/150" ></span>
    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 ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent ac erat ut eros venenatis pulvinar. Pellentesque eu dapibus dui. Ut semper sed enim ut vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas hendrerit vulputate et, lobortis non nulla. Aenean dui libero, dictum vel nibh eget, tristique egestas enim.
  </p>
</div>

.wrapper {
  display: flex;
  border: 1px solid;
  overflow: hidden;
  resize: horizontal;
  margin-bottom: 100px;
}
.box {
  text-align: justify;
  font-size: 20px;
  margin: 0;
}
.float {
  float: right;
  height: 100%;
  margin-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  shape-outside: linear-gradient(-45deg, #000 calc(150px * 0.707),#0000 0); 
  /* cos(45deg) ~ 0.707 */
}
img {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}