How do I fix searchbar breaking styles

I was making a way to search through a list of YouTube videos on my site, but I found that whenever I type something in the search bar it breaks the wrapping/styling of the videos.

Before I type

After I type

I don’t really know javascript well at all, so it could be a problem with that.

This is my css/html/js for the videos/search:

div.item {
    vertical-align: top;
    display: inline-block;
    text-align: left;
    width: 270px;
}
img {
    width: 256px;
    height: 144px;
}
.meta {
    display: block;
}

<div class="item" style="display: none;"><img src="https://i.ytimg.com/vi/XXXXX/hqdefault.jpg"><span class="meta">Title</span><div class="meta"><span>ID</span><span>&nbsp;&nbsp;·&nbsp;&nbsp;</span><span>Date</span></div><br><br></div>

function search_videos() { 
    let input = document.getElementById('search-bar').value 
    input=input.toLowerCase(); 
    let x = document.getElementsByClassName('item'); 
      
    for (i = 0; i < x.length; i++) {  
        if (!x[i].innerHTML.toLowerCase().includes(input)) { 
            x[i].style.display="none"; 
        } 
        else { 
            x[i].style.display="list-item";                  
        } 
    } 
}

I want it to show up like the first image when searching and not one video on each line.

>Solution :

To fix this issue, you can modify your JavaScript function to set the display style for matching videos to "inline-block" instead of "list-item." Here’s an updated version of your function:

function search_videos() {
    let input = document.getElementById('search-bar').value;
    input = input.toLowerCase();
    let x = document.getElementsByClassName('item');

    for (let i = 0; i < x.length; i++) {
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display = "none";
        } else {
            x[i].style.display = "inline-block"; 
        }
    }
}