How can one have HTML elements with different column lengths in the same markdown file?

I have some HTML content like this:

<div>
  <div class="col-lg-7 col-11">
      <p>text</p>
  </div>
  <div class="col-11">
      <iframe></iframe>
  </div>
  <div class="col-lg-7 col-11">
      <p>more text</p>
  </div>
  <div class="col-11">
      <iframe></iframe>
  </div>
</div>

I want to have my index.md like this:

text

<div class="col-11"><iframe></iframe></div>

more text

<div class="col-11"><iframe></iframe></div>

What should my default.html look like?