Skip to content

Ensure the trailing icon never orphans itself on to a new line. Paired with the icon alignment technique I shared last week to vertically center it.

<p class="relative inline-block pr-[1.25em]">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, ducimus
  <span class="absolute ml-[.25em] inline-flex h-[1lh] items-center">
    <Icon name="arrow-up-right" class="size-[1em]" />
  </span>
</p>

Picked this tip of from John Phamous some time ago.