Essayez d'aligner deux cartes horizontales ensemble afin que le bas des deux images s'aligne

Question

La carte de l'image ne s'aligne pas exactement avec la carte à côté. J'ai essayé d'aligner deux cartes horizontales pour que le bas de l'image s'aligne ensemble. Voici mon code html actuel :

<div class="container">
    <div class="row">
      <div class="col">
        <div class="card w-100 d-flex flex-column">
          <div class="row">
            <div class="col">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                <hr> 
                <p> This is some text and more text and also some more text  </p>
                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col">
              <img class="img-fluid w-100 h-100" src="images/airplane.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card w-100 d-flex flex-column">
          <div class="row">
            <div class="col">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                <hr> 
                <p> This is some text and more text and also some more text and more and more
                 </p> 

                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col">
              <img class="img-fluid w-100 h-100" src="images/Agility.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>`

et mon code CSS :

.card-block {
                  font-size: 1.2em;
                  position: relative;
                  padding: 1em;
                  border-top: 1px solid rgba(34, 36, 38, .1);
                  box-shadow: none;
                }

                .card {
                  font-size: 1em;
                  overflow: hidden;
                  padding: 5;
                  border-radius: .27rem;
                  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 1 1px #d4d4d5;
                  margin-top: 25px;
                }

                .img {
                  object-fit: cover;
                  height: 100%;
                  width: 100%;
                }

Image actuelle publiée. Mon objectif est d'aligner l'avion avec le bas de la deuxième image de la carte. J'utilise Bootstrap version 4 à cet effet.

J'ai essayé d'utiliser ce code :

<div class="container">
    <div class="row">
      <div class="col-sm-6 d-flex align-items-stretch">
        <div class="card">
          <div class="row">
            <div class="col-sm-6 d-flex align-items-stretch">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                  <hr> 
                <p> This is some text and more text and also some more text  </p>
                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col-sm-6 d-flex align-items-stretch">
              <img class="img-fluid d-flex w-100" src="images/airplane.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>
    <div class="col-sm-6 d-flex align-items-stretch">
        <div class="card">
          <div class="row">
            <div class="col-sm-6 d-flex align-items-stretch">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                  <hr> 
                <p> This is some text and more text and also some more text and more and more </p>
                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col-sm-6 d-flex align-items-stretch">
              <img class="img-fluid d-flex w-100" src="images/Agility.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Le bas de la carte est bien aligné ici, mais l'image de la première carte ne descend pas jusqu'en bas. Image : Le plan n'est pas aligné avec le bas de la deuxième image

Answer 1

L'ajout de h-100 à la ligne de classe div sous la classe de carte a résolu mon problème.