How to arrange dynamically passed objects in multiple rows with rails view_component?

Question

I apologize in advance if you think that the title doesn't seem to be appropriate enough to demonstrate the issue precisely. I'm using tailwindcss for rails application. I passed data to view_component with the help of an array containing multiple hashes. The issue I'm facing is that it puts all the objects in one row keeping them overlapped one on other. I want them to move out to new row if needed hence maintaining the "space-x-4".

html and model for the whole section is as following:

<section class="flex bg-Ghost-White px-48">
  <div class="flex bg-Ghost-White px-48">
    <div class="basis-[40%] flex flex-col">
      <p class="text-Eerie-Black text-[30px] font-bold tracking-[-0.75px] leading-[34px]">Who have we helped?</p>
      <p class="text-Outer-Space text-[22px] font-normal tracking-[-0.55px] leading-[32px]">We take pride in providing help to people around the world.</p>
    </div>
    <div class="flex basis-[60%] space-x-4 bg-Ghost-White">
      <%= render Homepage::Projects::Project::Component.with_collection(@projects) %>
    </div>
  </div>
</section>


module Homepage
  module Projects
    class Component < ViewComponent::Base
      def initialize
        @projects = [{ title: "Water Well", image: "water-well.svg" },
                        { title: "Helping Children", image: "helping-children.svg" },
                        { title: "Eid", image: "eid.svg" },
                        { title: "Ramadan", image: "ramadan.svg" },
                        { title: "Orphans", image: "orphans.svg" },
                        { title: "Emergencies", image: "emergencies.svg" },
                        { title: "UK Projects", image: "uk-projects.svg" },
                        { title: "Mosque Builds", image: "mosque-builds.svg" },
                        { title: "Homeless", image: "homeless.svg" }]
      end
    end
  end
end

And these for the individual component is shown below:

<div class="flex items-center space-x-2 p-4 bg-White"> 
  <%= image_tag @project[:image], class: "w-[45px] h-[45px]", alt: "" %> 
  <p class="whitespace-nowrap"><%= @project[:title] %></p>
</div>

module Homepage
  module Projects
    module Project
      class Component < ViewComponent::Base
        with_collection_parameter :project

        def initialize(project:)
          @project = project
        end
      end
    end
  end
end

Answer 1

They are rendering in one row because of an extra flex class in the wrapper around the component. Try this:

<div class="basis-[60%] space-x-4 bg-Ghost-White">
    <%= render Homepage::Projects::Project::Component.with_collection(@projects) %>
</div>