title: Position elements horizontally with TailwindCSS
body: <p>So i am using Tailwindcss and laravel and in this page i am trying to position products horizontally in the page according to their category</p>
  <p>Here's the products list
  <a href="https://i.stack.imgur.com/5XRCq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5XRCq.png" alt="Product list vertical" /></a></p>
  <p>So to put them horizontally, i tried using the class=&quot;flex flex-wrap content-start space-x-2&quot;
  But the width changes and becomes like that.
  <a href="https://i.stack.imgur.com/DQ2nh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DQ2nh.png" alt="Product list horizontal" /></a></p>
  <p>Here's the code :
  <a href="https://i.stack.imgur.com/1lqxN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1lqxN.png" alt="Code" /></a></p>
  <pre><code>@foreach ($categories as $category)
  </code></pre>
  {{ $category->title }} id) }}">(Voir tout les produits)
  
      @foreach ($category->products as $product)
  <pre><code>{{-- &lt;div&gt;{{ $product-&gt;title }}&lt;/div&gt; --}}
  
          &lt;div class=&quot;mt-5&quot;&gt;
              
                  &lt;div class=&quot;max-w-sm mx-auto rounded-md shadow-md overflow-hidden&quot;&gt;
                      &lt;div class=&quot;flex items-end justify-end h-56 w-full bg-cover&quot; style=&quot;background-image: url('https://images.unsplash.com/photo-1563170351-be82bc888aa4?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=376&amp;q=80')&quot;&gt;
                          &lt;button class=&quot;p-2 rounded-full bg-blue-600 text-white mx-5 -mb-4 hover:bg-blue-500 focus:outline-none focus:bg-blue-500&quot;&gt;
                              &lt;svg class=&quot;h-5 w-5&quot; fill=&quot;none&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot;&gt;&lt;path d=&quot;M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;px-5 py-3&quot;&gt;
                          &lt;h3 class=&quot;text-gray-700&quot;&gt;{{ $product-&gt;title }}&lt;/h3&gt;
                          &lt;span class=&quot;text-gray-500 mt-2&quot;&gt;{{ $product-&gt;price }} DA&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              
          &lt;/div&gt;
      
      
  @endforeach
  </code></pre>
  
  @endforeach