Same height container-CodePudding

I know there are a few questions to this topic already, but I just can not get it to work.

So I have row with two cols inside and I want them to be the same height, I already tried a lot with d-flex, but it just not seems to work for me:

<div >
   <div >
      <div >
        <form id="" >
            <div ></div>
            <div ></div>
        </form>
      </div>
   </div>
   <div >
      <div >
        <form id="" >
            <div ></div>
            <div ></div>
        </form>
      </div>
   </div>
</div>

CodePudding user response：

You need to add align-items-stretch

https://getbootstrap.com/docs/5.2/utilities/flex/#align-items

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
   <div >
      <div >
        <form id="" >
            <div >A<br /><br /><br /><br /></div>
            <div >B</div>
        </form>
      </div>
   </div>
   <div >
      <div >
        <form id="" >
            <div >C</div>
            <div >D</div>
        </form>
      </div>
   </div>
</div>

CodePudding user response：

I think you can remove custom heaight of colums and try align-item:streach;