Im working with BOOTSTRAP 5, and im currently having troubles with cards. Im printing them via JS but tried working on it on HTML so that’s not the problem. I cant figure out how to make cards all the same, with img on the left on xl bootstrap breakpoint and img on top on all the other breakpoints. problem is the text on the right (xl) and bottom (rest).
Text is varying, so that fucks up my whole card. One is bigger, one is smaller etc.

<div class="row mt-5 mb-5">
                        <div class="col-12">
                            <h4 class="text-white mb-4">Buonasera</h4>
                            <div id="printHorizontalCards" class="row text-white">

                            </div>
                        </div>
                    </div>

let card = document.createElement("div");
    card.classList.add("col-12", "col-sm-6", "col-lg-3", "col-xl-4", "mt-3");
    card.innerHTML = `
              <a href="#" class="text-decoration-none">
                  <div class="card mb-3 grey-horizontal-card position-relative h-100 d-xl-flex justify-content-center">
                      <div class="row ">
                          <div class="col-lg-12 col-xl d-flex align-items-center">
                              <img src="${albums[i].albumCover}" class="img-fluid rounded-start"
                                  alt="immagine album" />
                          </div>
                          <div class="col d-flex align-items-center">
                              <div class="card-body">
                                  <h5 id="titoloHorizontalCard"
                                      class="card-title d-flex justify-content-center text-white">
                                      ${albums[i].albumTitle}
                                  </h5>
                              </div>
                          </div>
                      </div>
                      <div class="play-badge">
                          <img class="playButton" src="/assets/imgs/svg/play-fill.svg"
                              alt="play button" />
                      </div>
                  </div>
              </a>
              `;
    document.getElementById("printHorizontalCards").appendChild(card);

Position-relative on the card cause i needed to add the badge on top of the img. It works fine on smaller dimensions, every card on top of each other with img on top and text on the bottom. Starts breaking at around 1100px and i cant figure out why. Text varies from 1 word to 8-12 words (where it breaks)

I tried with fixed widths / heights, removing h-100, and many other things. I spent like 3h trying to fix this cause it’s the last thing of my project, but just cant make things work. Tried to position fix the text but it breaks even more. Text-truncate is letting text go over the card..Idrk
This should be final result
Everything broke in my project