How to align button on right, with all text on one line?

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)