JSFiddle - React, Tailwind, and code Playground

by Jaak Kütt

HTML

<section>
<p>ant
of Mars, if he exists, probably knows its truth as we know it.
We are not quite sure of any one thing in biology; our knowledge of geology
is relatively very slight, and the economic laws of society are
uncertain to every one except some individual who attempts to set them
forth; but before the world was fashioned the square on the hypotenuse
was equal to the sum of the squares on the other two sides of a right
triangle, and it will be so after this world is dead; and the inhabitant
of Mars, if he exists, probably knows its truth as we know it.
We are not quite sure of any one thing in biology; our knowledge of geology
is relatively very slight, and the economic laws of society are
uncertain to every one except some individual who attempts to set them
forth; but before the world was fashioned the square on the hypotenuse
was equal to the sum of the squares on the other two sides of a right
triangle, and it will be so after this world is dead; and the inhabitant
of Mars, if he exists, probably knows its truth as we know it.
We are not quite sure of any one thing in biology; our knowledge of geology
is relatively very slight, and the economic laws of society are
uncertain to every one except some individual who attempts to set them
forth; but before the world was fashioned the square on the hypotenuse
was equal to the sum of the squares on the other two sides of a right
triangle, and it will be so after this world is dead; and the inhabitant
of Mars, if he exists, probably knows its truth as we know it.
  <div class="shape left"></div>
  <div class="shape right"></div>
</p>
</section>

CSS

section {
  max-width: 800px;
  display: flex;
  height: 100%;
}

section p {
  display: inline-block;
  align-self: flex-end;
}

.shape {
  width: 150px;
  height: 150px;
  background-color: maroon;
  clip-path: polygon(0 0, 150px 150px, 0 150px);
  shape-outside: polygon(0 0, 150px 150px, 0 150px);
  shape-margin: 20px;
  align-self: flex-end;
}

.shape.left {
  float: left;
}

.shape.right {
  float: right;
}