# 2025-08-18-1

Published: Mon, Aug 18, 2025
Tags: demo, css

Ensure the trailing icon never orphans itself on to a new line. Paired with the icon alignment technique I [shared last week](/notes/2025-08-14-1) to vertically center it.

```tsx {3-5}
<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](https://x.com/JohnPhamous) some time ago.