Alignment with Tailwind and React - reactjs

Question

I'm trying to get two different visualizations to properly sit next to each other.
This is the current styling...
<div className="flex flex-col md:flex-row" >
<div className="w-full md:w-2/3">
<div className="text-center mt-4 flex justify-center items-center">
<h1 className="text-blue-500 text-lg font-semibold mr-5">
{format(new Date(selectedDate), 'do, MMMM - yyyy')}{' '}
</h1>
{isLoading && <Loader />}
</div>
<div>
<div className = "grid-cols-2 grid-flow-col" >
<div className = "grid-cols-1">
<h3 className="capitalize">Moodmap Daily Index</h3>
<Overview data={lineGraphData} timing={settingsData} />
</div>
<div>
<Expressions data={expressionsData} />
</div>
</div>
</div>
<div style={{ height: 100, width: 1000 }}>
<SubstanceDetails
fetchSubstances={fetchSubstances}
loading={loading}
data={data}
/>
</div>
</div>
</div>
For some reason when it renders, although I've made a bunch of changes, it comes out like this,
I want them to sit horizontally, with the bottom graph on the right hand side, ideally with the line graph a lot larger, taking up say 2/3. Unsure why this bug keeps happening.

Answer 1

You need to create a grid container by including the grid className in the element where you specify your grid columns:
<div className = "grid-cols-2 grid-flow-col" >
should become:
<div className = "grid grid-cols-2 grid-flow-col" >
https://tailwindcss.com/docs/display#grid
Note, to debug this you could have used the inspector to see that there was no grid container in your output.