title: p tags breaking out of div body
body: <p>I have the following HTML code</p>
  
  <pre><code>  &lt;div class="wrapper"&gt;
      &lt;div class="recipe" id="1"&gt;
        &lt;img src="https://www.biggerbolderbaking.com/wp-content/uploads/2017/07/1C5A9329.jpg" class="recipe-logo" /&gt;
        &lt;p class="item-1"&gt;Chocolate Brownies&lt;/p&gt;
        &lt;p class="item-2"&gt;24/11/2019&lt;/p&gt;
        &lt;p class="item-3"&gt;Prep Time: 20mins&lt;/p&gt;
        &lt;p class="item-4"&gt;Cook Time: 30mins&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>with the following CSS attached</p>
  
  <pre><code>.recipe {
    background-color: white;
    height: 250px;
  }
  .recipe-logo {
    width: 250px;
    height: 250px;
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.recipe {
    background-color: white;
    height: 250px;
  }
  
  .recipe-logo {
    width: 250px;
    height: 250px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="recipe" id="1"&gt;
      &lt;img src="https://www.biggerbolderbaking.com/wp-content/uploads/2017/07/1C5A9329.jpg" class="recipe-logo" /&gt;
      &lt;p class="item-1"&gt;Chocolate Brownies&lt;/p&gt;
      &lt;p class="item-2"&gt;24/11/2019&lt;/p&gt;
      &lt;p class="item-3"&gt;Prep Time: 20mins&lt;/p&gt;
      &lt;p class="item-4"&gt;Cook Time: 30mins&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to have a sideway list that looks something like this</p>
  
  <p><a href="https://i.stack.imgur.com/enr7t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/enr7t.png" alt="enter image description here"></a></p>
  
  <p>however, even though I have the wrapper div ('recipe') set to only have a height of 250px, the <code>&lt;p&gt;</code> tags break out of the div, and form a vertical list below it, so I get this</p>
  
  <p><a href="https://i.stack.imgur.com/YsmII.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YsmII.png" alt="enter image description here"></a></p>