Tailwind a max of two flex items per row-CodePudding

I've the following items:

const items = ['2342', 'Jensen Huang', '[email protected]', '$ 200', 'delivered','29 Aug 2022', 'View All of the items']

And it is rendered as such (it's like flex-auto):

<div >
  {items.map((item) => <p>{item}</p>)}
</div>

It gives the following

 ----------------------------------------- 
|2342     Jensen Huang    [email protected]|
|$ 200     delivered           29 Aug 2022|
|View All of the items                    |
 -----------------------------------------

but I want a maximum of two elements per row; like this:

 -------------------------------- 
|2342                Jensen Huang|
|[email protected]           $ 200|     
|delivered            29 Aug 2022|
|View All of the items           |
 --------------------------------

CodePudding user response：

Use grid and grid-cols-2.

<div >
  {items.map((item) => <p>{item}</p>)}
</div>

CodePudding user response：

I think something like this might be what you want?

<div >
<div>
    <p>2342</p>
    <p>[email protected]</p>
    <p>delivered</p>
    <p>View All of the items</p>
</div>
<div>
    <p>Jensen Huang</p>
    <p>₹ 200</p>
    <p>29 Aug 2022</p>
</div>