I am creating one responsive design where i need to use three column inside header for all the device resolution.

I have started developing mobile first responsive header, In below code i am escaping the tablet resolution. For explanation used only mobile and laptop resolution.

<div class="m-0 grid grid-cols-12 gap-1">
  <div class="rounded-lg col-span-2 lg:col-span-1">backIcon</div>
  <div class="rounded-lg shadow col-span-8 lg:col-span-10">Hello World</div>
  <div class="rounded-lg col-span-2 bg-purple-500 shadow lg:col-span-1">Icon</div>
</div>

This code i used in tailwind Play Area

Above code works fine for mobile, But when i check for laptop screen, I found like the first column have more space which i need to decrease, So that the middle column content should be near to the first column content.

Need help.