float-left not working in relative position - css

Question

I am trying to place my Image on the left side of the div.
Anything I try to do to move the Image or the div fail to work. Why is the Image stuck in the center?
I was able to achieve this using flexbox but had to switch to relative positioning because of the Nextjs Image component conflict. In the Image tag you'll see "layout='fill'" which was the root of my problem, but I am unable to rid myself of that piece of code
<div className="relative w-full bg-blue p-4 my-4 rounded-2xl lg:basis-5/12">
<Image className="float-left mr-4" src={"/"+icon} layout={"fill"} objectFit={"contain"} />
<div>
<h3>{ title }</h3>
<p>
{ paragraph }
</p>
</div>
</div>
What I am getting right now:

Answer 1

The float will not work with layout='fill'. Change it to either 'fixed' or 'intrinsic'. I recommend wrapping the Image tag into a div and making the div float. Try something like this.
<div className="bg-blue relative my-4 w-full rounded-2xl p-4 lg:basis-5/12">
<div className="float-left mr-4">
<Image src={'/' + icon} layout={'fixed'} height="120" width="120" />
</div>
<div>
<h3>{title}</h3>
<p>{paragraph}</p>
</div>
</div>
And to improvise it. You do not even need to use float. You can achieve same with flex. So if using float is not important you can do something like this
<div className="bg-blue my-4 flex w-full gap-4 rounded-2xl p-4 lg:basis-5/12">
<Image src={'/' + icon} layout={'intrinsic'} height="120" width="120" alt="" />
<div>
<h3>{title}</h3>
<p>{paragraph}</p>
</div>
</div>