Tailwind width dosn't work with breakpoints

Question

I'm a total beginner to tailwind, and I decided to rebuild one of my projects with it in React. I have a grid with 2 columns, that should align next to each other horizontally, instead of vertically when the screen reaches the breakpoint.

My problem is that when I set the width to fit the screen, which as far as I know, should make each column fill the screen. Then the first column should push down the 2. under it. But it doesn't, and I don't know how to fix it.

<div class="grid grid-cols-2 h-screen">
    <div className="justify-center items-center flex flex-col lg:w-screen">
        <h1 id="elsoszoveg-cim" className="text-5xl tracking-wide font-medium text-center pb-9">...Mi Pixie?</h1>
        <p className="text-center text-2xl md:w-screen">
            Pixie egy személyes projekt, amelyet azért fejlesztettem, 
            hogy a különböző elfoglaltságaimat egyesíteni tudjam.
        </p>
    </div>
    <div className=" bg-sky-100">
    </div>
</div>

So basically I want my 2 columns to be below each other after the breakpoint.

Answer 1

Instead of applying your breakpoints to the width of your elements, change the number of columns you have in your grid. For example, by having two columns on smaller screens and 1 column on wider screens grid-cols-2 md:grid-cols-1.

<div class="grid h-screen grid-cols-2 md:grid-cols-1">
  <div class="flex flex-col items-center justify-center">
    <h1 id="elsoszoveg-cim" class="pb-9 text-center text-5xl font-medium tracking-wide">...Mi Pixie?</h1>
    <p class="text-center text-2xl">Pixie egy személyes projekt, amelyet azért fejlesztettem, hogy a különböző elfoglaltságaimat egyesíteni tudjam.</p>
  </div>
  <div class="bg-sky-100"></div>
</div>

Tailwind-play