Bootstrap 4 want uneven column heights

Question

When using boostrap <class="row"> with two <class="col">. The biggest column is the standard height for all three columns. Is their a way for this to not happen because when I create another row it leaves a lot of whitespace between rows because one out of three column is huge.

My code

<div class="row mt-3 flex-nowrap">


  <div class="col mt-3 align-self-start">

    <h2>im the header</h2>

    <a>i am text</a><br />

    <a>i am text</a><br />

    <a>i am text</a><br />

    <a>i am text</a><br />

    <a>i am text</a><br />

    <a>i am text</a><br />

    <a>i am text</a><br />

    <a>i am text</a><br />

    <a>i am text</a><br />

    <a>i am text</a><br />

    <a>i am text</a><br />

    <a>i am text</a><br />

  </div>




  <div class="col mt-3 align-self-start">

    <h2>im the header</h2>

    <a>i am text</a><br />

    <a>i am text</a><br />

    <a>i am text</a><br />

    <a>i am text</a><br />

    <a>i am text</a><br />

  </div>

</div>


<div class="row mt-3 flex-nowrap">


  <div class="col align-self-start">

    <h2>im the header</h2>

    <a>i am text</a><br />

  </div>



  <div class="col mt-3 align-self-start">

    <h2>im the header</h2>

    <a>i am text</a><br />

  </div>

</div>

I tried making one long column it ruins the sequnce of everthing. Don want to use collapse or carosel. Dont want to set standard height for all column because some will get very huge. I'll take any suggestion from html, css, and javescript.