Can I prevent the height of the 1st bootstrap column from exceeding the height of the 2nd column with bootstrap grid

Question

I have this card below with 2 columns, one with an image and the 2nd column with text.

Can I prevent the image column height from exceeding the height of the text column? Using bootstrap flex maybe?

Here is a Stackblitz and code below

<div class="container">
  <div class="row row-cols-1 row-cols-md-2">
    <div class="col mb-4">
      <div class="card h-100">
        <div class="row no-gutters">
          <div class="col-md-4">
            <picture>
              <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1631484260/Chuckd/yogabands/CerroCrest/wx415paoq5f0nfzhixcy.jpg" alt="place">
            </picture>
          </div>
          <div class="col-md-8">
            <div class="card-body py-1">
              <div class="row">
                <div class="col-12">
                  <h5 class="card-title d-inline">Park</h5>
                  <span class="float-right center-star">
                3.4
              </span>
                </div>
              </div>

              <div class="row">
                <div class="col-12">
                  <span>Access</span>
                  <span class="float-right">None</span>
                </div>
                <div class="col-12">
                  <span>Max Size</span>
                  <span class="float-right">10</span>
                </div>
                <div class="col-12">
                  <span>Hosted</span>
                  <span class="float-right">2</span>
                </div>
                <div class="col-12">
                  <span>Type</span>
                  <span class="float-right">None</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>