<section><h2>Before</h2></section>
<section>
  <div class="container">
    <div class="wrapper">
      <img src="https://mdn.github.io/css-examples/shapes/images/star-shape1.png" alt="star">
      <p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier,
        they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched
        the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.</p>
    </div>
  </div>
</section>

<section>
  <h2>After&mdash;Look ma no Photoshop!</>
</section>

<section>
  <div class="container">
    <div class="wrapper">
      <img class="shape-outside" src="https://mdn.github.io/css-examples/shapes/images/star-shape1.png" alt="star">
      <p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier,
        they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched
        the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.</p>
    </div>
  </div>
</section>
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;  
}

img {
  float: left;
}

img:after {
  content: '';
  display: table;
  clear: both;
}

.shape-outside {
  shape-outside: url(https://mdn.github.io/css-examples/shapes/images/star-shape1.png);  
  shape-margin: 5px;
}

section {
  margin: 1% 0;
  display: flex;
  align-items: center;
  justify-content: center;  
}

.container {
  width: 45%;
  border: 1px solid black;
  padding: 1%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.