Elements stick to each other horizontally instead of spreading verticlly (Nextjs Tailwind)-CodePudding

I've been trying to create sort of boxed with shadow containers. One at the top that containes input fields and another one under it containing a graph.

This is the code.

<div className="bg-grey w-screen h-screen m-10 shadow-lg"> {/* Background*/}
          <div className="flex justify-center"> {/* Center*/}
            <div className="bg-white w-3/4 h-1/4 rounded-2xl overflow-hidden mb-50 shadow-lg"> {/* Card*/}
              <InputForm/>  
            </div>
            <div className="bg-white w-3/4 h-1/4 p-20 rounded-2xl overflow-hidden mb-50 shadow-lg"> {/* Card*/}
              <ValueChart/>  
            </div>
          </div>
      </div>

I'm tried to use grid instead of flex and chanigng the numbers. But nothing seemed to work.

CodePudding user response：

Flexbox layouts arrange children in a row by default. You need to specify flex-direction: column. You can use tailwind's flex-col class to do this. I've also added the items-center class to center the items (this adds align-items: center to align the items centrally across the axis/direction. If you were laying them out in a row, i.e. without flex-col then you would use justify-center as you originally had).

CodeSandbox demo: https://codesandbox.io/s/strange-keldysh-dhw54f?file=/pages/index.js

<div className="bg-grey w-screen h-screen m-10 shadow-lg"> {/* Background*/}
  <div className="flex flex-col items-center"> {/* Center*/}
    <div className="bg-white w-3/4 h-1/4 rounded-2xl overflow-hidden mb-50 shadow-lg"> {/* Card*/}
      <InputForm/>  
    </div>

    <div className="bg-white w-3/4 h-1/4 p-20 rounded-2xl overflow-hidden mb-50 shadow-lg"> {/* Card*/}
       <ValueChart/>  
    </div>
  </div>
</div>