How to manage flex cards with different width and height? - Tailwind - css

Question

I'm building a new website (with React TypeScript an Tailwind) for my agency, and we have a list of articles (News) which looks like this:
As you can see, we have 3 different sizes of cards to display.
My API request returns "small" / "medium" / "large" in the object of the article to say which kind of card the specific article need.
My question is:
how can I deal this ?
How can I say to my browser to not render with the order of objects received, and to fill the page "properly" ?
By properly, I mean not letting "holes" in the page.
Here is an try with grids :
<div className="col-span-2 bg-white flex items-center justify-center">
<div className="relative w-5/12">
<img src="./assets/images_mock/GoogleMyBusiness.png" alt="" />
<span className="absolute top-2 left-2 rounded-md bg-purple-800 text-white text-xs p-1 uppercase">TEST</span>
</div>
<div className="w-7/12">
<h3 className="font-NexaBlack text-xl">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</h3>
<p className="text-gray-800 text-sm mt-2">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<button className="rounded-full mt-4 px-4 py-2 border border-gray-300 text-gray-500">
<Link to={'#'}>read article</Link>
</button>
</div>
</div>
<div className="col-span-4 bg-white flex items-center justify-center">
<div className="relative w-1/2">
<img src={RectangleNews} alt="" />
<span className="absolute top-2 left-2 rounded-md bg-purple-800 text-white text-xs p-1 uppercase">TEST</span>
</div>
<div className="w-1/2">
<h3 className="font-NexaBlack text-xl">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</h3>
<p className="text-gray-800 text-sm mt-2">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<button className="rounded-full mt-4 px-4 py-2 border border-gray-300 text-gray-500">
<Link to={'#'}>read article</Link>
</button>
</div>
</div>
<div className="col-span-2 bg-white flex items-center justify-center">
<div className="relative w-5/12">
<img src="./assets/images_mock/InterkabNews.png" alt="" />
<span className="absolute top-2 left-2 rounded-md bg-teal-500 text-white text-xs p-1 uppercase">Interkab</span>
</div>
<div className="w-7/12">
<h3 className="font-NexaBlack text-xl">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</h3>
<p className="text-gray-800 text-sm mt-2">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<button className="rounded-full mt-4 px-4 py-2 border border-gray-300 text-gray-500">
<Link to={'#'}>read article</Link>
</button>
</div>
</div>
but this code does not re-arrange the divs to fit the width of the screen.
I tried to be as clear as possible.
Hope someone have a solution.
Thank you mates !