How to allign the text with React/Next.js with tailwind and Radix ui

Question

I'm using Next.js with tailwind css and I'm trying to do an accordion with a title with some content. I removed some unnecessary code that is not pertinent with this post

So I want to align my text "Front-End Technologies" with my "languages" to be like a flex-start, but I couldn't figure it out how to fix it and tried many things to do it

I know it's something with <AccordionPrimitive.Trigger, because I removed it just to see the result and it gives me this

Skills.tsx

import * as React from "react";
import { Icon } from "@iconify/react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const Skills = () =>
{
  return (
    <div className="flex flex-col space-y-6 pb-96">
      <Accordion type="single" collapsible>
        <AccordionItem value="item-1">
          <div className="grid grid-cols-12 gap-y-12 pl-16">
            <div className="col-span-2"> <AccordionTrigger>Languages</AccordionTrigger></div>
            <div className="col-span-10">
            </div>
          </div>
        </AccordionItem>
      </Accordion>
      <Accordion type="single" collapsible>
        <AccordionItem value="item-1">
          <div className="grid grid-cols-12 gap-y-12 pl-16">
            <div className="col-span-2"> <AccordionTrigger>Front-End Technologies</AccordionTrigger></div>
            <div className="col-span-10">
            </div>
          </div>
        </AccordionItem>
      </Accordion>
    </div>
  )
};

export default Skills;

Accordion.tsx

"use client"

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn("border-b pb-5 pt-5 ", className)}
    {...props}
  />
))
AccordionItem.displayName = "AccordionItem"

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "skills-title flex items-center justify-between font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className
      )}
      {...props}
    >
      <div className="flex justify-center items-center">
        <div className="p-6 pl-0">
          {children}
        </div>
      </div>
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName


export { Accordion, AccordionItem, AccordionTrigger }