How make columns height independent from each other

Question

What I want to achieve is to make the the columns with number 1 and 2 independent from the height size of the column with text, so if added later on another div it will be directly placed under the first 2 columns without skipping any empty gaps because of the third column long height, like this:

Columns with gap

Columns without gap

I tried this but it didn't work.

 <div class="row text-center ">
        
        <div class="col-9 ">
            
        <div class="row border">
            
            <div class="col-9 border">1</div>
            <div class="col-3 border">2</div>
            </div>
        </div>
        <div class="col-3 border">
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit
        </div>
  </div>
   

Thanks for any help.

Answer 1

I think you can use align-items Property in CSS Flexbox Layout!!