When using a grid layout with 2 columns on devices wider than 768px, there seems to be an increase in spacing between the element and the one following it at that breakpoint.
I'm looking for a solution to adjust the height so that it is dictated by the content within that specific column.
** My development environment includes Tailwind CSS and Next.js.
import React from 'react'
function services() {
return (
<div>
{/* Carousel component */}
<div className='grid grid-cols-1 md:grid-rows-6 md:grid-cols-2 sm:px-5'>
<div className='flex flex-col px-5 my-10 md:row-start-1 md:col-start-1 md:col-span-1'>
<h2 className='text-xl mb-4'>Inbound Marketing</h2>
<p className='text-gray-400'>Through Inbound Marketing, we establish... </p>
</div>
<div className='flex flex-col px-5 my-10 md:row-start-2 md:col-start-2'>
<h2 className='text-xl mb-4'>What is Inbound Marketing?</h2>
<p className='text-gray-400'>Inbound Marketing is...</p>
</div>
<div className='flex flex-col px-5 my-10 md:row-start-3 md:col-start-1'>
<h2 className='text-xl mb-4'>How it works:</h2>
<p className='text-gray-400'>The concept of Inbound Marketing is...</p>
<p className='text-gray-400'>We aim to present...</p>
</div>
<div className='flex flex-col px-5 my-5 md:row-start-4 md:col-start-1'>
<h2 className='text-xl mb-4'>What results do we want to achieve?</h2>
<p className='text-gray-400'>Inbound Marketing serves...</p>
<p className='text-gray-400'>We can...</p>
<p className='text-white my-2'>Increase...</p>
<p className='text-white my-2'>Decrease...</p>
<p className='text-white my-2'>Improve...</p>
</div>
<div className='px-5 my-5 md:row-start-5 md:col-start-1'>
<video autoPlay loop muted>
<source src="/social.mp4" type='video/mp4'/>
</video>
</div>
<div className='flex flex-col px-5 my-10 md:row-start-5 md:col-start-2'>
<h2 className='text-xl mb-4'>Social Ads</h2>
<p className='text-gray-400'>It's a form of advertising...</p>
</div>
<div className='flex flex-col px-5 my-10 md:row-start-6 md:col-start-1'>
<h2 className='text-xl mb-4'>PPC Campaigns</h2>
<p className='text-gray-400'>We also manage...</p>
<h2 className='text-xl my-4'>How do we do this...</h2>
<p className='text-gray-400'><span className='text-white'>Analysis:</span> Study...</p>
<p className='text-gray-400 mt-2'><span className='text-white'>Analysis... </span>Study and...</p>
<p className='text-gray-400 mt-2'><span className='text-white'>Proposals...</span> Proposed actions...</p>
<p className='text-white mt-4'>To carry out...</p>
</div>
<div className='px-5 md:row-start-6 md:col-start-2'>
<video autoPlay loop muted>
<source src="/analytics.mp4" type="video/mp4" />
</video>
</div>
</div>