Please help me to improve dynamic HTML page which gives availability to search tiles by substrings. There is code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Tiles with Search and Highlighting</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        input[type="text"] {
            width: 98%;
            padding: 10px;
            margin-bottom: 20px;
            font-size: 16px;
        }
        .tiles {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }
        .tile {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }
        .tile:hover {
            transform: scale(1.05);
        }
        .highlight {
            background-color: blue; /* Highlight color */
            font-weight: bold;
        }
    </style>
</head>
<body>

<h1>Search Tiles</h1>
<input type="text" id="searchInput" placeholder="Search for tiles..." onkeyup="filterTiles()">

<div class="tiles" id="tilesContainer">
    <!-- Dynamic tiles will be populated here -->
</div>

<script>
    // Sample data: an array of paragraphs
    const paragraphs = [
        "This is the first tile.",
        "Here is the second tile.",
        "Tile number three is different.",
        "This is the fourth idea.",
        "Fifth tile, not very interesting.",
        "Here's another tile for good measure.",
        "The seventh tile contains different content.",
        "Eighth tile showcases something unique.",
        "Ninth tile is about JavaScript.",
        "Tenth tile focuses on dynamic content"
    ];

    // Function to render tiles with highlighted search terms
    function renderTiles(filteredParagraphs, searchTerms) {
        const tilesContainer = document.getElementById('tilesContainer');
        tilesContainer.innerHTML = '';
        filteredParagraphs.forEach(paragraph => {
            const tile = document.createElement('div');
            tile.className = 'tile';
            tile.innerHTML = highlightText(paragraph, searchTerms);
            tilesContainer.appendChild(tile);
        });
    }

    // Function to highlight the search term in the paragraph
    function highlightText(text, searchTerms) {
        if (!searchTerms || searchTerms.length === 0) return text; // Return unmodified text if no search terms
        const regex = new RegExp(`(${searchTerms.join('|')})`, 'gi'); // Create regex for case-insensitive matching
        return text.replace(regex, '<span class="highlight">$1</span>'); // Highlight match
    }

    // Function to filter tiles based on search input
    function filterTiles() {
        const searchInput = document.getElementById('searchInput').value;
        
        // Split input by comma and trim spaces
        const searchTerms = searchInput.split(',').map(term => term.trim().toLowerCase()).filter(term => term);

        const filteredParagraphs = paragraphs.filter(paragraph => 
            searchTerms.some(term => paragraph.toLowerCase().includes(term))
        );

        renderTiles(filteredParagraphs, searchTerms); // Pass the search terms for highlighting
    }

    // Initial render of all tiles
    renderTiles(paragraphs, '');
</script>

</body>
</html>

Make tiles dynamically sizing smarter based on paragraph length (if text longer - tile height bigger). rework the positioning system so that the tiles are displayed correctly without errors. paragraph texts should be aligned in width and moved within the tile boundaries (long words also must be wrapped). In your answer write only what needs to be changed in the code