Why the tailwind CSS flex box is rendering like this?

Rendered output

<div className="flex flex-col"><div className="w-full"><p className="text-7xl">Skills</p></div><div className="flex flex-col md:flex-row"><div><p>        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem        labore consectetur, adipisci dicta illum ratione aperiam recusandae        perferendis. Corporis nihil commodi in! Pariatur, molestias        similique officiis ad quis impedit dolore.</p></div><div><Orbit items={orbitItems} size="text-4xl" /></div></div></div>

I expected something the output to be something like this:

Title

Lorem ipsum .... Orbit