Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

logo after last word multi-line – Tailwind

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 :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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.

>Solution :

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading