I am trying to align my button (JSX component) on the right-hand side, and have all the text on one line. I am using next.js and tailwindcss, and the button contains plain text and a react-icon. All of these components are contained within a card.
Currently, my output is this:
My code for the containing card is:
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 for the button:
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>
);
Check floats
https://tailwindcss.com/docs/float
Use float-right to float an element to the right of its container.
Check sizing
https://tailwindcss.com/docs/min-width
Utilities for setting the minimum width of an element (e.g. min-w-max)