https://i.sstatic.net/QkqVo.png
I am facing difficulty in creating a 2-column fixed layout with precise width control. The layout I have currently seems almost perfect, but there is some strange padding on the top-left element.
Parent
<Layout>
<div className="flex flex-col mt-5 w-full h-full sm:h-fit space-y-8 sm:space-y-0 sm:flex-row flex-wrap">
<Article/>
<Article/>
<Article/>
<Article/>
<Article/>
<Article/>
</div>
</Layout>
Child
<div className="flex flex-col w-full h-fit sm:w-1/3 pl-5 space-y-2 m-3">
{/* Date */}
<span className="font-fira text-xs text-[#B3B4B4]">January 1, 2023</span>
{/* Title */}
<span className="font-inter font-semibold text-xl hover:opacity-50">building and automating a homelab in 2023</span>
{/* Tags */}
<div className="flex">
{/* Can support multiple tags in theory, so we wrap */}
<div className="flex space-x-1 text-xs text-[#B3B4B4] font-fira">
<img src="/icons/tag.svg" className="w-2" />
<span>life</span>
</div>
</div>
</div>
While I acknowledge that using grid might be a more suitable option, I prefer and am more experienced with flexbox. Can someone guide me on achieving the layout shown in the image below without the strange padding/margin issue?