Looking for a way to align multiple divs inside another div vertically with even spacing between them? They should all start at the top.
Currently, my solution has the child-divs positioned at the top-left corner of the parent div (see the first picture):
<div className="flex-col items-center justify-center h-screen w-full">
<div>
<input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} />
<button className="text-white ml-3" type="submit" onClick={handleEnterCode}>JOIN GAME</button>
</div>
<div>
<h1 className="text-white">OR</h1>
</div>
<div>
<button className="text-white" type="submit" onClick={e => setShowForm(true)}>CREATE GAME</button>
</div>
<div>
<form onSubmit={handleLogout}>
<button className="text-white" type="submit">logout</button>
</form>
</div>
</div>
However, when I switch to using "flex," the children are placed much further down towards the bottom (as shown in the second picture).
<div className="flex-col flex items-center justify-center h-screen w-full">
<div>
<input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} />
<button className="text-white ml-3" type="submit" onClick={handleEnterCode}>JOIN GAME</button>
</div>
<div>
<h1 className="text-white">OR</h1>
</div>
<div>
<button className="text-white" type="submit" onClick={e => setShowForm(true)}>CREATE GAME</button>
</div>
<div>
<form onSubmit={handleLogout}>
<button className="text-white" type="submit">logout</button>
</form>
</div>
</div>