Making flexbox table layout line up with content

I'm trying to create a simple table layout using flexbox (so the table is properly responsive). I'm doing it like this (you need react and bootstrap):

export function UITest(){        const data = [            {                Name: "John Doe",                Address: "123 Main St, Springfield, IL",                Insurance: "Health Insurance Co.",                Phone: "(555) 123-4567",                Email: "john.doe@example.com"            },            {                Name: "Jane Smith",                Address: "456 Oak Rd, Shelbyville, IL",                Insurance: "Life Care Insurance",                Phone: "(555) 234-5678",                Email: "jane.smith@example.com"            },            {                Name: "Lǐ Tiānyǔ Zé Fēng Chéng Zhì Hóng Wěi",                Address: "789 Pine Ln, Capital City, IL",                Insurance: "Auto Protection Insurance",                Phone: "(555) 345-6789",                Email: "li.the.god@example.com"            },            {                Name: "Emily White",                Address: "101 Maple Ave, Ogden, IL",                Insurance: "Health First Insurance",                Phone: "(555) 456-7890",                Email: "emily.white@example.com"            }        ];    const titles=["Name", "Address", "Insurance", "Phone", "Email"]    return(<div className="container bg-secondary my-3 p-3"><h1 className="mb-5">UiTest</h1><div className="d-flex flex-column justify-content-center overflow-scroll"><div className="border-bottom border-2 d-flex flex-row justify-content-center">                    {titles.map((title, index) => (<div key={index} className={"border-start p-2"+(title==="Insurance"?" flex-grow-1":"")}>{title}</div>                    ))}</div>                {data.map((item, index) => (<div key={index} className="d-flex justify-content-center bg-info m-2 p-2 rounded">                        {Object.entries(item).map(([key, value], index) => (<div key={index} className={"border border-1 p-2"+(key==="Insurance"?" flex-grow-1":"")}>{value}</div>                        ))}</div>                ))}</div></div>    )}

The problem is, the columns don't line up properly (borders are to visualize the problem):

I've tried solving this with a table but it will not work, because whatever makes the table line up the colums correctly does not play nice with flexbox. Also you cannot style rows like I want to with tables.How can I make the columns line up properly (ideally without setting a fixed width and while still retaining the responsiveness of the table, where it flexes along the insurance column)