Set Fixed Gap on Flex Tailwind - css

Question

This is my design with flex. You can see both the div's are having different gap in between. How Can I make it equal?
I just want to set a fixed width for the second column however I am not able to achieve it in Tailwind.
Code:
<div className='bg-gray-1000 rounded shadow border border-opacity-50 text-white flex flex-col lg:flex-row w-7/12 mx-auto justify-between p-2 mb-2 items-center'>
<div className='bg-primary rounded w-14 h-14 flex items-center'>
<img src={props.logo}/>
</div>
<div className='flex flex-col'>
<div>{props.title}</div>
<div className='flex'>
<div><img className='w-6 mt-1' src={props.flag}/></div>
<div><FaInfoCircle className='inline ml-2 text-xl'/></div>
<div><button className={`ml-2 rounded px-4 py-0 text-sm uppercase bg-${props.color}-600`} disabled>{props.mode}</button></div>
</div>
</div>
<div className='flex flex-col'>
<div><FaCalendar className='inline mr-2 text-xl'/> {props.date}</div>
<div className='mt-1'><FaClock className='inline mr-2 text-xl'/> {props.time}</div>
</div>
<div className='flex flex-col'>
<div> <FaUsers className='inline mr-2 text-xl'/> {props.vs}</div>
<div className='mt-1'><FaUsers className='inline mr-2 text-xl'/> {props.slots} Slots</div>
</div>
<div className='flex flex-col'>
<div><AiFillDollarCircle color='green' className='inline mr-2 text-xl'/></div>
<div className='mt-1'><AiFillTrophy className='inline mr-2 text-xl md:text-2xl'/> {props.prize}</div>
</div>
</div>
I would love to get some help on this, cheers.

Answer 1

Add flex-grow class to block with title and set space-x-{value} class for parent so it will add gap between child elements. Demo
P.S. You have bg-${props.color}-600 which will be purged in a production mode