facing issue vertically Aligning items in Bootstrap

Question

I want to give same row line to all the grid without mentioning height. So, I used align-item-stretch but arrow button not adjusting.

How to align the arrows to be on the same height?

Here my code

Here are the image

 <div
    className="m-2 p-0 shadow-lg rounded-2 pe-auto border border-primary"
    style={{ width: "100%", maxWidth: "200px" }}
    key={data.key}
 >
    <a href="/">
        <div className="p-2 d-flex flex-xl-column align-items-center align-items-xl-start">
            <img
                className="mr-1"
                style={{ height: 50, width: 50 }}
                src={data.img}
                alt=""
            />
            <div>
                <h3 className="wow fadeInUp">{data.name}</h3>
                <p className="fs-6 mt-2">{data.describe}</p>
            </div>
        </div>
        <div className="d-flex justify-content-end">
            <img
            style={{width: 30,height: 30,objectFit: "contain",borderBottomRightRadius: 8}}
            src={require("./components/Images/arrow-right.png")}
            alt=""
            />
        </div>
    </a>
</div>

How to adjust arrow in the end, which I need to understand.

Answer 1

You can achieve this with some minor changes to your HTML markup (not absolutely needed, but it's easier to manipulate them via CSS if you do).

First, change the way your a and the div holding the arrow are rendered, by adding additional classes.

<a href="/" className="myLink"> <!-- add the class myLink -->
  <div className="p-2 d-flex flex-xl-column align-items-center align-items-xl-start">
    <img
      className="mr-1"
      style={{ height: 50, width: 50 }}
      src={data.img}
      alt=""
    />
    <div>
      <h3 className="wow fadeInUp">{data.name}</h3>
      <p className="fs-6 mt-2">{data.describe}</p>
    </div>
  </div>
  <div className="myArrow d-flex justify-content-end"> <!-- add the class myArrow -->
    <img
      style={{
        width: 30,
        height: 30,
        objectFit: "contain",
        borderBottomRightRadius: 8
      }}
      src={require("./components/Images/arrow-right.png")}
      alt=""
    />
  </div>
</a>

Then, add this to your CSS:

a.myLink {
  position: relative;
  display: block;
  height: 100%;
}
.myArrow {
  position: absolute;
  top: 50%;
  right: 5px;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
}

The background colour and border-radius were added to make the arrow button somewhat transparent.

If you don't want the arrows to overlap the text below them, you can increase the width of the content below the arrows (for example, by the arrow width + some pixels, and then add some padding-right to it (again, equal to the arrow width + some pixels).