How to align an image right to an image using Tailwind CSS?

January 30, 2022

I am building a website with react ad tailwind. But I am having a problem aligning an image :

I need the smaller image to be in the right of the bigger image. I tried so much to align it there but I can’t. Here is my code

Tailwind CSS :

.banner-image {
  @apply   flex mt-24 ml-10 w-max rounded-lg
}
.side-image{
  @apply flex mt-24 ml-10 float-right w-48 rounded-lg mr-96
}

React :

function Banner() {
  return <div >
    <div>
      <img className='banner-image' src="https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8N3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="" />
    </div>
    <div>
      <img className='side-image' src="https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MTB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="" />
    </div>
  </div>;
}

How do I solve it??

>Solution :

Remove float-right class.

.banner-image {
  @apply flex mt-24 ml-10 w-max rounded-lg;
}
.side-image {
  @apply flex mt-24 ml-10 w-48 rounded-lg mr-96;
}

Add flex class to the div wrapper.

function Banner() {
  return (
    <div className='flex'>
      <div>
        <img
          className='banner-image'
          src='https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8N3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60'
          alt=''
        />
      </div>
      <div>
        <img
          className='side-image'
          src='https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MTB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60'
          alt=''
        />
      </div>
    </div>
  );
}