title: How to make a embedded codepen manually resizeable
body: <p>I am working on an article about code and I have embedded a codepen into it but I want it to be manually resizable like adjusting the width and height of a textbox but doing the same to an embedded website. I do not know how to adjust it by dragging the corner of the embedded website.</p>
  <pre><code>&lt;p class=&quot;codepen&quot; data-height=&quot;500&quot; data-theme-id=&quot;dark&quot; data-default-tab=&quot;html,result&quot; data-slug-hash=&quot;BawxRrZ&quot; data-user=&quot;Javscript&quot; style=&quot;box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot;&gt;
    &lt;span&gt;See the Pen &lt;a href=&quot;https://codepen.io/Javscript/pen/BawxRrZ&quot;&gt;
    How to make a top navagation bar&lt;/a&gt; by Jason (&lt;a href=&quot;https://codepen.io/Javscript&quot;&gt;@Javscript&lt;/a&gt;)
    on &lt;a href=&quot;https://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
  &lt;/p&gt;
  &lt;script async src=&quot;https://cpwebassets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;
  </code></pre>