Getting Div inside Div hydration error. Why can't you have a div inside a div?

Question

currently having a play around with NextJS and Supabase. But have been encountering non-stop errors. One that keeps coming up is this Hydration error. I abandoned one project due to that and a couple of other errors, started a new one and even doing something as simple as having a login form is causing me so much drama. In the end i removed the entire login page i had created and attempted to just create something so basic i thought would surely work but still no!

Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Did not expect server HTML to contain a div in div.

Why is this getting an error? Since when can we not put a div inside a div?

      <div className="text-yellow-500 h-[100vh] flex justify-center items-center">
        <div className="flex flex-col gap-2 bg-slate-950 p-20">
          <h1>Login</h1>
          <label htmlFor="">email</label>
          <input type="text" name="email" onChange={onChange}/>
          <label htmlFor="">password</label>
          <input type="password" name="password" onChange={onChange}/>
          <button onClick={login} className="bg-white mt-5 ">Login</button>
        </div>
      </div>

I can't see the logical reason for this being the case

I've removed the outer div which causes the error to go away but thats not really what i want and just seems ridiculous that i cant have nested divs....thats how most web applications are made!