problem with a search bar that updates after every letter inputted, html and javascript

I wrote a search bar function that updates the shown options as you input letters.
The problem is that after I put letters the not hidden images stay in the same fixed position and I want them to start from the left.
When I use ‘display: none;’ on the hidden images the transition of the hidden images fade out or back in, doesn’t work at all.

So in conclusion, I want it to show a transition of hiding the images and moving to the start instead of the hidden images, and now it or the transition or the moving to the start.

This is my css code:

.search-bar-container {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 5px;
    margin: 0px 83px;
    margin-top: 120px;
    border-radius: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;  /* Add relative positioning */
}

/* Input Field */
#search-bar {
    padding: 8px 12px;
    font-size: 17px;
    font-family: 'Courgette Regular', Times, serif;
    border: none;
    border-radius: 20px;
    outline: none;
    width: calc(100% - 100px); /* Take full width minus space for the button */
    letter-spacing: 0.01em; /* Slight spacing for refinement */
    text-align: left; /* Ensure text aligns to the left */
}

/* Clear Button (X) */
#clear-button {
    padding: 0 8px;
    font-size: 18px;
    background-color: transparent;
    color: #cf9254;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 90px; /* Position it on the left side of the input */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10; /* Make sure it stays above the search input */
    visibility: hidden; /* Hide the button by default */
}

/* Search Button */
#search-button {
    padding: 8px 12px;
    font-size: 17px;
    font-family: 'Courgette Regular', Times, serif;
    background-color: #cf9254;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    letter-spacing: 0.01em; /* Slight spacing for refinement */
    position: absolute; /* Absolute positioning */
    right: 10px; /* Position 10px from the right */
    top: 50%; /* Center it vertically */
    transform: translateY(-50%); /* Adjust for perfect centering */
}

/* Show the clear button when input has value */
#search-bar:not(:placeholder-shown) + #clear-button {
    visibility: visible; /* Show the button if there's text */
}

#search-button:hover {
    background-color: #a87b44; /* Darker shade when hovered */
}

#clear-button:hover {
    color: #a87b44; /* Change color when hovered */
}

/* Search Results - Hide Non-Matching Recipes */
.recipe-container {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.recipe-container.hidden {
    opacity: 0;
    transform: scale(0.9); /* Slightly shrink when hidden */
    pointer-events: none; /* Disable interaction */
}

.side-nav.open ~ main .search-bar-container {
    width: 90%;
}

/* Adjust positioning of the search bar when side nav is open */
.side-nav.open ~ main {
    margin-left: 200px; /* Give space for the side-nav */
}

.recipes-section {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    margin-left: 85px;
    max-width: 1181px;
    box-shadow: 0px 0.5px 10px 0px #cf9254ab;
}

.recipes-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, 220px); /* Fixed size columns */
    gap: 10px; /* Consistent spacing */
    justify-content: start; /* Align items from the left */
}

/* Ensure all recipe containers are 220px x 220px */
.recipe-container {
    position: relative;
    width: 220px;
    height: 220px;
}

/* Ensure images fit within the 220px container */
.recipe-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio while covering */
    border-radius: 12px;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    display: block;
}

/* Hide non-matching recipes and remove space with a fade transition */
.recipe-container.hidden {
    opacity: 0;               /* Fade out */
    visibility: hidden;       /* Make the element invisible but still in layout */
    pointer-events: none;     /* Disable interaction */
    transform: scale(0.9);    /* Optional: Shrink the element a bit while fading */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; /* Apply transitions */
}```