CSS alignment: flexbox/ tailwind alignment issues - css

Question

Currently I'm using tailwind to align data in react, I've tried adding flexbox but it appears im off with a few things
This is my expected outcome:
I would love if someone can explain what im doing wrong as well.
Current outcome:
My last attempt was this:
import React from "react";
import ReactDOM from "react-dom";
const SummaryPerPlatform = () => {
return (
<div>
<div className="max-w-md overflow-hidden bg-white m-4">
<div className="flex flex-col min-h-full">
<div className="flex flex-col flex-grow">
<div className="px-6 py-3 border-b">
<div className="text-xl font-bold"> Twitter </div>
</div>
<div className="px-6 py-3 border-b">
<span className="">Avg. sentigment(0.0 -1.0)</span>
<span className="">0.31</span>
</div>
<div className="px-6 py-3 border-b">
<div className="text-xl font-bold"> Instagram </div>
<span className="">Post analyzed</span>
<span className="">5,670</span>
</div>
<div className="px-6 py-3 border-b">
<div className="text-xl font-bold"> LinkedIn </div>
<span className="">Positive posts (>0.66)</span>
<span className="">1,849</span>
</div>
<div className="px-6 py-3 border-b">
<span className="">Negative posts (0.33)</span>
<span className="">1,981</span>
</div>
</div>
</div>
</div>
</div>
);
};
export default SummaryPerPlatform;
const rootElement = document.getElementById("root");
ReactDOM.render(<SummaryPerPlatform />, rootElement);
Any help is very much appreciated.

Answer 1

You should use flex-row instead of flex-col for whole container. Otherwise I would suggest for using an extra div for differentiating these sections and using Grid to arrange these div in a similar width.
You can try like this:
// ...
return (
<div>
<div className="max-w-md overflow-hidden bg-white m-4">
<div className="grid grid-cols-4 gap-1">
<div>
<div className="px-6 py-3 border-b">
<div className="text-xl font-bold"> Twitter </div>
</div>
<div className="px-6 py-3 border-b">
<span className="">Avg. sentigment(0.0 -1.0)</span>
<span className="">0.31</span>
</div>
</div>
<div>
<div className="px-6 py-3 border-b">
<div className="text-xl font-bold"> Instagram </div>
<span className="">Post analyzed</span>
<span className="">5,670</span>
</div>
</div>
<div>
<div className="px-6 py-3 border-b">
<div className="text-xl font-bold"> LinkedIn </div>
<span className="">Positive posts (>0.66)</span>
<span className="">1,849</span>
</div>
<div className="px-6 py-3 border-b">
<span className="">Negative posts (0.33)</span>
<span className="">1,981</span>
</div>
</div>
</div>
</div>
</div>
)
// ...