percentage width behaving weirdly
hey folks this is my code
I have set the width of div containing text to 60% which means it should 60% width of containing section but it's happening exactly opposite image container is taking 60% width instead you guys can see it in attached image can anyone tell me why its happening
const OurMission = () => {
return (
<section className="flex relative p-8">
<div className='w-[60%]'>
<h1>Learn more</h1>
<h1><span>About our</span> Missions</h1>
<span></span>
<p>
Buy One Gram is a Paltform or Service Provider Working with Farmers,
Agro Industry, Exporters, Wholesaler, Big Stores, Mart, Grocery selling
Online Platform To Increase Farmers Income, Direct Selling, Export from
Farmers Field, Reduce Delivery Time, Transportaion Cost Etc.
Provide farmers to a logging Pannal to get in touch with daily update's.
Also Provide Demand, help to Sell Agro Products as Quality, after all buying
procedure Shift to B1G Warehouse and Delivery to the Consumer Receive
order and Demand from Exporter, Agro Industry, Store Etc.
Make sure for payment safety, Quality assurance and On time Delivery with Safety.
Through the use of technology connect the farmer and the end consumer at one single point.
Thus providing a simple platform to benefit both. Own Buy One Gram Wholesale Application that
Provide all product to Shop or Mart We Directly connected to 20 Big Mart and 56 Small Outlet
</p>
</div>
<div>
<img className='h-full w-full object-cover object-center' src='farming.png' alt='Farming' loading='lazy'/>
</div>
</section>
)
}
export default OurMissionconst OurMission = () => {
return (
<section className="flex relative p-8">
<div className='w-[60%]'>
<h1>Learn more</h1>
<h1><span>About our</span> Missions</h1>
<span></span>
<p>
Buy One Gram is a Paltform or Service Provider Working with Farmers,
Agro Industry, Exporters, Wholesaler, Big Stores, Mart, Grocery selling
Online Platform To Increase Farmers Income, Direct Selling, Export from
Farmers Field, Reduce Delivery Time, Transportaion Cost Etc.
Provide farmers to a logging Pannal to get in touch with daily update's.
Also Provide Demand, help to Sell Agro Products as Quality, after all buying
procedure Shift to B1G Warehouse and Delivery to the Consumer Receive
order and Demand from Exporter, Agro Industry, Store Etc.
Make sure for payment safety, Quality assurance and On time Delivery with Safety.
Through the use of technology connect the farmer and the end consumer at one single point.
Thus providing a simple platform to benefit both. Own Buy One Gram Wholesale Application that
Provide all product to Shop or Mart We Directly connected to 20 Big Mart and 56 Small Outlet
</p>
</div>
<div>
<img className='h-full w-full object-cover object-center' src='farming.png' alt='Farming' loading='lazy'/>
</div>
</section>
)
}
export default OurMissionI have set the width of div containing text to 60% which means it should 60% width of containing section but it's happening exactly opposite image container is taking 60% width instead you guys can see it in attached image can anyone tell me why its happening

