bootstrap 5 how to bottom align link in grid column-CodePudding

I've a web page that displays a list of items using bootstrap 5 grid. Each column in the grid contains one item, and each item will have an Edit link. I'm wanting the Edit link to be positioned at the bottom of the column. I've tried align-bottom and bottom-0. But none of them work. In the example below, you should see that the Edit link on the second column is not at the bottom of that column. What am I doing wrong? (I've also tried position-absolute)

https://jsfiddle.net/hockchailim/5mgfkoLc/2/

    <div >
    <div >
        <div >
            <div >
                Item 1
            </div>
            <div>
                Desc Line 1
            </div>
            <div>
                Desc Line 2
            </div>
            <div>
                Desc Line 3
            </div>
            <a href="http://localhost:8000/products/1/edit" >Edit</a>
        </div>
        <div >
            <div >
                Item 2
            </div>
            <div>
                Desc Line 1
            </div>

            <a href="http://localhost:8000/products/2/edit" >Edit</a>
        </div>
    </div>
</div>

CodePudding user response：

You can use responsive flexbox:

  <div >
    <div >
      <div >
        <div >
          Item 1
        </div>
        <div>
          Desc Line 1
        </div>
        <div>
          Desc Line 2
        </div>
        <div>
          Desc Line 3
        </div>
        <a href="http://localhost:8000/products/1/edit" >Edit</a>
      </div>
      <div >
        <div >
          Item 2
        </div>
        <div>
          Desc Line 1
        </div>

        <a href="http://localhost:8000/products/2/edit" >Edit</a>
      </div>
    </div>
  </div>

Using the d-flex class to transform into flex items and flex-column to define the direction of the items, you just need to use the justify-content-between class to align the items vertically and distribute them evenly inside the container along the main axis