Flex items responsive issues - html

Question

I am using Tailwind and I made this div:
The problem is that it looks like this when I shrink it down:
With white-space: nowrap it goes out of the div.
I am not able to fix this issue. However, I have made it go into columns when it goes below md screen however not sure how I can stop it from making another line when resolution changes.
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 md:space-x-16 whitespace-nowrap'>
<div className='bg-primary rounded w-14 h-14 flex items-center'>
<img src={props.logo}/>
</div>
<div className='flex flex-col flex-grow'>
<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 md:pr-4'>
<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>

Answer 1

the best solution for you if you don't want to make the fonts smaller, IMO would be: adding a wrapper on three columns at the right and making it a flex with justify-content: space-between.
It will adjust the gaps according the space left for use.
seems your title at the left content is dynamic and it can get really long, try limiting text width and using text-overflow: ellipsis on it. otherwise you cannot fit long text beside other content.