logo after last word multi-line - Tailwind

Joh 0
Viewed 20

I have a title with a fixed width, and I need to set a logo after the last word in the title.

When the title is too long, it takes 2 lines.

Example :

My
Title (logo should go here)

Here is a codepen with tailwind : https://codepen.io/jbrazillier/pen/OJZWYEb

I can only set it below the title, or on the right of the first word.

tailwind-css css
1 Answers

Since you have fixed size for your h2 you should wrap your image and title in a relative div and your logo should be absolute then use position left-full

by the way you should improve your markup i added the border to show you what i mean

<script src="https://cdn.tailwindcss.com"></script>
<h2 class="w-[40px] flex text-3xl font-bold border">
  <div class="relative">My title
    <img class="w-8 h-8 absolute bottom-0 left-full" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Red-circle.svg/1200px-Red-circle.svg.png" alt="" />
  </div>
</h2>

mmh4all0
Related