How to remove whitespace when collapsing cards

Question

I am writing a filter search to filter through cards of customer data. The search functions work, but when the cards collapse they leave degrees of whitespace which increases as you select the cards closer to the bottom.

Here is what the page looks like uncollapsed:

And this is what it looks like collapsed:

This is my HTML container for the area:

<div class="container pt-3 pb-3">
    <div class="form-outline" id="customer-search-bar">
        <input type="search" id="filter" class="form-control" placeholder="Search" aria-label="Search" >
    </div>
    <div class="card-lists" id="card-lists">
       <div class="row">
          {% for data in raw.CustomerDataEntries %}
          <div class="card col-sm-12 mb-3" id="card-perim">
             <div class="card-body">
                <h5 class="card-title">Customer ID: {{ data.ExternalId }}</h5>
                <h5 class="card-title">Forename: {{ data.Fields.forename }}</h5>
                <h5 class="card-title">Surname: {{ data.Fields.surname }}</h5>
                <h5 class="card-title">Postcode: {{ data.Fields.post_code }}</h5>
                <h5 class="card-title">Matches: {{ data.Matches }}</h5>
                <a href="{%  url 'portal:customers_details'  data.ExternalId %}" class="tableButton">Details</a>
                <a href="{%  url 'portal:customers_edit' data.ExternalId %}"  class="tableButton">Edit</a>
             </div>
          </div>
          {% endfor %}
       </div>
    </div>
</div>

This is my CSS style sheet for the section:

#card-perim{
    border: hidden;
}

#card-body{
    padding: 2em;
}

#customer-search-bar{
    margin: 1em;
}

And this is my JavaScript code for the filter search:

let filter = document.querySelector('#filter');
filter.addEventListener('keyup', () => {
  searchID();
});

function searchID() {
  const input = filter.value.toUpperCase();
  const cardContainer = document.querySelector('#card-lists');
  const cards = cardContainer.querySelectorAll('.card-body');

  cards.forEach(card => {
    card.style.display = 'none';
    card.querySelectorAll(".card-body h5.card-title").forEach(title => {
      if (title.innerText.toUpperCase().indexOf(input) > -1) {
        card.style.display = "block";
      }
    });
  });
}

How can I fix it?

I have tried a few different things, but I don't know whether it's the CSS or JavaScript that is causing this problem.