I need help aligning my button (JSX component) to the right side while ensuring that all text remains on a single line. I am working with next.js and tailwindcss, and the button includes plain text as well as a react-icon. These components are all wrapped within a card.
Currently, this is what I'm seeing:
This is my current code for the card component:
return (
<Fragment>
<div className=" bg-white rounded-md text-black overflow-hidden ">
<img className="object-cover w-full h-48" src={"/" + image}></img>
<div className=" flex-none" id="text">
<div>
<h1 className=" text-3xl font-semibold">{title}</h1>
</div>
<div>
<p className=" text-gray-700 font-bold">{humanReadableDate}</p>
<p className=" text-lg italic text-gray-500">{formattedAddress}</p>
</div>
<div className=" m-3">
<Button link={"/events/" + id}>
<span className="inline">Explore event</span>
<span className="inline"><AiOutlineArrowRight /></span>
</Button>
</div>
</div>
</div>
</Fragment>
);
And here's the code for the button component:
return (
<Link href={props.link}>
<a className="inline-block text-right bg-emerald-500 text-white py-2 px-5 rounded-md">{props.children}</a>
</Link>
);