Apply padding to last line of a paragraph

I am looking to add padding to the last line of a padding element only. I have the following html using Tailwind classes:

<div className="my-3 max-h-[4.5rem] relative">
  <p ref={ref} className="inline-block line-clamp-3 pr-14">{data.description}</p>
  <button className="text-blue-600 leading-none absolute bottom-[-4px] right-0 font-medium px-2 py-1" onClick={() => setOpen(true)}>
    more
  </button>
</div>

The padding right pr-14 is applied to the entire p tag. How can I get this to apply to only the last line? I have tried block, inline etc and none of them seem to make a difference. Is this possible in CSS?

For context, I am trying to add padding to the last line when I need to show a "more" button. The only alternative I can think of is to do something like the below image, however unsure how to have the text fade into the background (I can't apply a background to the more background as it is transparent).

from Apply padding to last line of a paragraph