Make the Sancia block and Nolan block in the same length as the input field above them

SearchPage.html

@@ -178,25 +178,24 @@
                     <h2 class="text-2xl font-bold mb-6 text-gray-800">Find Your Perfect Furry Companion</h2>
                     
                     <div class="mb-6">
-                        <div class="relative">
+                        <div class="relative w-full">
                             <input type="text" placeholder="Search by name, species or personality..." 
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                             <button class="absolute right-3 top-3 text-gray-400 hover:text-blue-600">
                                 <i data-feather="search" class="w-5 h-5"></i>
                             </button>
                         </div>
-                    </div>
-
-                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+</div>
+                    <div class="flex flex-col gap-4">
                         <!-- Character cards will be dynamically inserted here -->
-                        <div class="character-card">
+                        <div class="character-card w-full">
                             <img src="http://static.photos/animals/200x200/1" alt="Character" class="character-image">
                             <div class="character-info">
                                 <h3 class="font-bold text-lg">Sancia</h3>
                                 <p class="text-gray-600 text-sm mb-2">Female Cat humanoid chatbot</p>
                             </div>
                         </div>
-                        <div class="character-card">
+                        <div class="character-card w-full">
                             <img src="http://static.photos/animals/200x200/1" alt="Character" class="character-image">
                             <div class="character-info">
                                 <h3 class="font-bold text-lg">Nolan</h3>
@@ -204,7 +203,7 @@
                             </div>
                         </div>
                     </div>
-                </div>
+</div>
             </div>
         </section>
 

style.css

@@ -27,9 +27,10 @@
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     background-color: white;
     padding: 1rem;
-    margin-bottom: 1rem;
+    margin-bottom: 0;
     display: flex;
     align-items: center;
+    width: 100%;
 }
 .character-info {
     flex: 1;