Not able to position Div using tailwindCSS - css

Question

This is my react code:
<div>
<div>
<div className=" grid gap-4 grid-row-4 grid-flow-col">
<div className="row-span-4 h-2/5 w-auto p-2 bg-white">
<p className="m-4 font-bold">
8 task completed out of 10
<br></br>
<h4 className="font-bold">23 December, Sunday</h4>
</p>
<div className="m-4"> Calender </div>
<div className="m-4 p-4 shadow-md">
<p>
<h4 className="font-bold">Send benefit review by Sunday</h4>
<span className="text-gray-600">
Due date: December 23, 2018
</span>
<br></br>
Image: George Fields
</p>
</div>
<div className="m-4 p-4 shadow-md">
<p>
<h4 className="font-bold">Invite to office meet-up</h4>
<span className="text-gray-600">
Due date: December 23, 2018
</span>
<br></br>
Image: Rebecca Moore
</p>
</div>
<div className="m-4 p-4 shadow-md">
<p>
<h4 className="font-bold">Office meet-up</h4>
<span className="text-gray-600">
Due date: December 23, 2018
</span>
<br></br>
Image: Lindsey Stroud
<h2 className="text-blue-1000 font-bold pt-4"> Show More </h2>
</p>
</div>
</div>
<div className="h-80 w-1/2 p-2 bg-white">
<h4 className="font-bold"> Deals </h4>
<AreaChart />
</div>
<div className="h-80 w-1/2 p-2 bg-white">
<h4 className="font-bold"> Tasks</h4>
<ul className="absolute inset-10">
<li className="text-green-600 font-bold">Active</li>
<li className="text-yellow-600 font-bold">Completed</li>
<li className="text-red-600 font-bold">Ended</li>
</ul>
<PieChart />
</div>
</div>
</div>
</div>
I am not able to position these grids, I don't know where to put the class on and also which classes exactly, please bear in mind this is my day 2 of learning tailwind, any help would be appreciated.
I am also attaching the picture of my UI and will point to the area I want to position this grid layout to. Thanks

Answer 1

I tried to use your code as much as possible, here is the result:
The code:
<div className="flex flex-row ">
<div className="flex flex-col w-96">
<div className="px-2">Placeholder</div>
<div className="px-2">Placeholder</div>
<div className="px-2">Placeholder</div>
<div className="px-2">Placeholder</div>
<div className="px-2">Placeholder</div>
<div className="px-2">Placeholder</div>
</div>
<div className="grid sm:grid-cols-2 bg-gray-200 w-full">
<p className="m-4 font-bold bg-white">
8 task completed out of 10
<br></br>
<h4 className="font-bold">23 December, Sunday</h4>
</p>
<div className="m-4 h-80 w-1/2 p-2 bg-white">
<h4 className="font-bold"> Deals </h4>
AreaChart
</div>
</div>
</div>