ARTICLE AD BOX
Try using col-span
<div class="flex flex-col sm:flex-row gap-4 mt-4"> <div class="flex-2 grid"> <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> <!-- Box 1 - Equal width with Box 2 --> <div class="md:col-span-2 hover:shadow-lg rounded-lg p-4 border border-1 bg-[#F0F4F9] bg-[url('assets/images/about-box-bg.svg')] bg-no-repeat bg-right-bottom bg-contain"> <div class="flex flex-col gap-2"> <img src="assets/images/about-icon-1.svg" alt="" class="mr-2" width="60px" height="60px" /> <h3 class="font-bold text-xl">Experience</h3> <p class="text-[0.9rem]">10+ years of auditing experience.</p> </div> </div> <!-- Box 2 - Equal width with Box 1 --> <div class="md:col-span-2 hover:shadow-lg rounded-lg p-4 border border-1 bg-[#F0F4F9] bg-[url('assets/images/about-box-bg.svg')] bg-no-repeat bg-right-bottom bg-contain"> <div class="flex flex-col gap-2"> <img src="assets/images/about-icon-2.svg" alt="" class="mr-2" width="60px" height="60px" /> <h3 class="font-bold text-xl">Licensed</h3> <p class="text-[0.9rem]">Licensed by the Department of Economic Development (DED).</p> </div> </div> <!-- Box 3 - Larger width --> <div class="md:col-span-3 hover:shadow-lg rounded-lg p-4 border border-1 bg-[#F0F4F9] bg-[url('assets/images/about-box-bg.svg')] bg-no-repeat bg-right-bottom bg-contain"> <div class="flex flex-col gap-2"> <img src="assets/images/about-icon-3.svg" alt="" class="mr-2" width="60px" height="60px" /> <h3 class="font-bold text-xl">Registered</h3> <p class="text-[0.9rem]">Registered with the Ministry of Economy (MoE).</p> </div> </div> <!-- Box 4 - Smaller width --> <div class="md:col-span-1 hover:shadow-lg rounded-lg p-4 border border-1 bg-[#F0F4F9] bg-[url('assets/images/about-box-bg.svg')] bg-no-repeat bg-right-bottom bg-contain"> <div class="flex flex-col gap-2"> <img src="assets/images/about-icon-4.svg" alt="" class="mr-2" width="60px" height="60px" /> <h3 class="font-bold text-xl">Certified</h3> <p class="text-[0.9rem]">ISO 9001:2015 certified.</p> </div> </div> </div> </div> <div class="flex-1 grid"> <img src="assets/images/about.webp" alt="" /> </div> </div>
New contributor
Cybersven is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
1 Comment
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
2026-01-20T10:21:05.34Z+00:00
