При добавлении элемента слота шаблона результаты будут выглядеть рядом

Question

Это код, который я написал.

 <ais-hits>
   <template
   slot="item"
   slot-scope="{ item }"
   >
   <div id="searchresults" class="h-auto max-w-3xl mx-auto">
    <span class="p-4 border-b flex justify-between items-center group hover:bg-teal-100">
      <a class="block flex-1 no-underline" href="#">
        <p class="font-bold text-sm text-indigo-600 hover:text-indigo-500">
          <span class="mr-2 text-teal-500">Component</span>Searchy
        </p>
        <p class="hidden md:block text-xs text-teal-600">#</p>
        <p class="text-sm py-1">Large search field appearing under the nav bar</p>
      </a>
      <a href="#">
        <img class="hidden md:block h-16 border-none" src="https://www.tailwindtoolbox.com/components/searchy.gif">
      </a>
    </span>   

    <span class="p-4 border-b flex justify-between items-center group hover:bg-teal-100">
      <a class="block flex-1 no-underline" href="#">
        <p class="font-bold text-sm text-indigo-600 hover:text-indigo-500">
          <span class="mr-2 text-teal-500">Component</span>Searchy
        </p>
        <p class="hidden md:block text-xs text-teal-600">#</p>
        <p class="text-sm py-1">Large search field appearing under the nav bar</p>
      </a>
      <a href="#">
        <img class="hidden md:block h-16 border-none" src="https://www.tailwindtoolbox.com/components/searchy.gif">
      </a>
    </span> 
  </p>
</a>
</span>
</div>
</template>
</ais-hits>

<template
   slot="item"
   slot-scope="{ item }"
   >

Эта строка кода сделает результат похожим на

Удаление, которое выглядело бы как ...

Я хочу, чтобы это выглядело так в секунду