How to shift the position of an icon from left to right in tailwind CSS? - position

Question

I myself am a beginner to tailwind CSS. So I am struck on how to change the position of this close icon from the left side to the right side. And if possible can you please help me also to I tried everything in the documentation but of no help. Here is the code 👇. I want the answer in tailwind CSS.
function Sidebar() {
return (
<div className="w-72 bg-white text-gray-100 shadow-lg">
<div className="p-7 text-sm">
<button className='text-slate-800 hover:text-white hover:bg-black rounded-full p-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer'>
<SwitchHorizontalIcon className ='h-5 w-5' />
</button>
<a className="flex items-center space-x-5 p-5 text-slate-800">
<MusicNoteIcon className="h-5 w-5" />
<p className="font-semibold hover:font-bold">
Sovereignty Kingdom
</p>
</a>
<nav className="flex items-center space-x-3 rounded-lg p-3 text-slate-800 hover:bg-black hover:text-white my-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer">
<HomeIcon className="h-5 w-5" />
<p>Home</p>
</nav>
<nav className="flex items-center space-x-3 rounded-lg p-3 text-slate-800 hover:bg-black hover:text-white my-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer">
<TrendingUpIcon className="h-5 w-5" />
<p>Trends</p>
</nav>
</div>
</div>
)
}
export default Sidebar```

Answer 1

If you mean only the first icon inside the button then here is what you need to do
First, give the second div (the parent of button) these classes flex flex-col, then for the button add self-end to align it to the right
<script src="https://cdn.tailwindcss.com"></script>
<div class="w-72 bg-white text-gray-100 shadow-lg">
<div class=" text-sm h-full flex flex-col ">
<button class='text-slate-800 self-end hover:text-white hover:bg-black rounded-full p-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer'>
<div class ='h-5 w-5 bg-red-500 rounded-full' />
</button>
<a class="flex items-center space-x-5 p-5 text-slate-800">
<MusicNoteIcon class="h-5 w-5" />
<p class="font-semibold hover:font-bold">
Sovereignty Kingdom
</p>
</a>
<nav class="flex items-center space-x-3 rounded-lg p-3 text-slate-800 hover:bg-black hover:text-white my-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer">
<HomeIcon class="h-5 w-5" />
<p>Home</p>
</nav>
<nav class="flex items-center space-x-3 rounded-lg p-3 text-slate-800 hover:bg-black hover:text-white transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer">
<TrendingUpIcon class="h-5 w-5" />
<p>Trends</p>
</nav>
</div>
</div>