I'm using TailwindCSS to create my page design. I can't set the component and image to the same size.

I've tried some combinations with flex, wrap, changing the width of the div or image, but can't find a solution. The result I want is that each movie contains the same sized rectangle containing the image, the same sized image with the following name. Also, for the overflows, I want to be able to scroll them in the x-scale, but not the y-scale. I managed to do it but I need to keep it and have the right size too.

I want the image to display like this: (https://i.stack.imgur.com/16C7M.jpg) But now they look like this: (https://i.stack.imgur.com/8L0sD.png).

The code for an image is the same for all images, only the link to the image and its name change. Code for an image:

<div
            class="bg-white rounded-[10px] border-4 cursor-pointer m-5 flex-wrap duration-500 w-1/6"
          >
            <img
              src="https://m.media-amazon.com/images/M/MV5BMWM5YzhmNGMtZTI4Ny00MGM4LThkYjAtMDIyMTEwNTQyZmQ1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL_.jpg"
              alt="movie poster"
              class="rounded-t-[0.625rem] rounded-b-none w-full"
            />
            <div class="">
              <h1 class="text-xl font-normal">I am not okay with this</h1>
            </div>
          </div>

The previous code is included in the following code:

<div class="container mx-auto">
      <div class="m-5">
        <h1 class="text-3xl m-2 pb-1 font-bold text-black">Action</h1>
        <div class="flex overflow-y-hidden overflow-x-scroll border-4">
        ....
        .... (put here the code for the images)
        ....
        </div>
     </div>
</div>

thanks for your help