Tailwind css - div not filling all the way to the top of given space when placed in a grid

I'm working on a personal website and am confused as to what is happening here.

I have a grid of 6 columns, in which 5 columns are taken up by a "GridItem", and have an additional leftover column where I intend to put another div with information in it (colored in red).

I have an svg that appears to not be filling up the leftover space on the right. However, only the first row appears to be misaligned vertically; I'm unsure why there is a gap here. Below is a screenshot of my issue, and my .tsx code.

interface GridItemProps {
  children: React.ReactNode;
  spacingClass: string;
  visualClass: string;
}

interface ExperienceItemProps {
  svg: React.ReactNode;
  title: string;
  location: string;
  date: string;
  content: string;
}

function GridItem({ children, spacingClass, visualClass }: GridItemProps) {
  return (
    <div className={`${spacingClass} ${visualClass} w-full mx-auto h-auto`}>
      {children}
    </div>
  );
}

function ExperienceItem({
  svg,
  title,
  location,
  date,
  content,
}: ExperienceItemProps) {
  return (
    <div>
      <div className="px-8 sm:px-0">{svg}</div>
      <div className="space-y-2 px-8 sm:px-0">
        <h1 className="text-2xl">{title}</h1>
        <p className="text-custom-grey-text text-lg">{location}</p>
        <p className="text-custom-grey-text text-lg">{date}</p>
        <p className="text-custom-blue-text text-lg">{content}</p>
      </div>
    </div>
  );
}

function Experience() {
  return (
    // Header
    <div className="h-screen experience-page">
      <div className="grid grid-cols-1 px-8 sm:px-0 py-8 bg-yellow-50">
        <div className="space-y-4 bg-green-300">
          <h1 className="text-5xl font-semibold">Experience</h1>
          <p className="text-custom-grey-text text-2xl bg-yellow-200">
            View LinkedIn
          </p>
        </div>
      </div>
      {/* grid of experience items */}
      <div className="grid grid-cols-6 space-y-6">
        <GridItem
          spacingClass="col-span-6 sm:col-span-5"
          visualClass="bg-blue-100"
        >
          <ExperienceItem
            svg={
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                className="size-6 mb-2 bg-green-300"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z"
                />
              </svg>
            }
            title="Job Title"
            location="Company - Location"
            date="January 2020 - January 2021"
            content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum."
          ></ExperienceItem>
        </GridItem>
        <div className="side-col col-span-1 bg-red-100">Hi</div>
        <GridItem
          spacingClass="col-span-6 sm:col-span-5"
          visualClass="bg-blue-100"
        >
          <ExperienceItem
            svg={
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                className="size-6 mb-2 bg-green-300"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z"
                />
              </svg>
            }
            title="Job Title"
            location="Company - Location"
            date="January 2020 - January 2021"
            content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum."
          ></ExperienceItem>
        </GridItem>
        <div className="side-col col-span-1 bg-red-100">Hi</div>
      </div>
    </div>
  );
}

export default Experience;

Screenshot of Issue

I have tried to recolor all of my divs, to attempt to see what is happening. I have tried tinkering with the margins / padding of all of my divs. I have also tried to tinker with the styling of my svg. Nothing has worked so far.

Any help is greatly appreciated!

Solution

space-y-* classes apply some CSS like:

.space-y-_ > * ~ * {
  margin-top: _
}

Such that the first item does not have any margin-top while the rest of the items do, hence the offset between the first and second child in the grid.

Instead, consider using gap-y-*:

function GridItem({ children, spacingClass, visualClass }) {
  return (
    <div className={`${spacingClass} ${visualClass} w-full mx-auto h-auto`}>
      {children}
    </div>
  );
}

function ExperienceItem({
  svg,
  title,
  location,
  date,
  content,
}) {
  return (
    <div>
      <div className="px-8 sm:px-0">{svg}</div>
      <div className="space-y-2 px-8 sm:px-0">
        <h1 className="text-2xl">{title}</h1>
        <p className="text-custom-grey-text text-lg">{location}</p>
        <p className="text-custom-grey-text text-lg">{date}</p>
        <p className="text-custom-blue-text text-lg">{content}</p>
      </div>
    </div>
  );
}

function Experience() {
  return (
    // Header
    <div className="h-screen experience-page">
      <div className="grid grid-cols-1 px-8 sm:px-0 py-8 bg-yellow-50">
        <div className="space-y-4 bg-green-300">
          <h1 className="text-5xl font-semibold">Experience</h1>
          <p className="text-custom-grey-text text-2xl bg-yellow-200">
            View LinkedIn
          </p>
        </div>
      </div>
      {/* grid of experience items */}
      <div className="grid grid-cols-6 gap-y-6">
        <GridItem
          spacingClass="col-span-6 sm:col-span-5"
          visualClass="bg-blue-100"
        >
          <ExperienceItem
            svg={
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                className="size-6 mb-2 bg-green-300"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z"
                />
              </svg>
            }
            title="Job Title"
            location="Company - Location"
            date="January 2020 - January 2021"
            content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum."
          ></ExperienceItem>
        </GridItem>
        <div className="side-col col-span-1 bg-red-100">Hi</div>
        <GridItem
          spacingClass="col-span-6 sm:col-span-5"
          visualClass="bg-blue-100"
        >
          <ExperienceItem
            svg={
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                className="size-6 mb-2 bg-green-300"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z"
                />
              </svg>
            }
            title="Job Title"
            location="Company - Location"
            date="January 2020 - January 2021"
            content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum."
          ></ExperienceItem>
        </GridItem>
        <div className="side-col col-span-1 bg-red-100">Hi</div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<Experience/>);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.4"></script>

<div id="app"></div>