Search code examples
htmltailwind-csssvelte

How to put my text in a single line in tailwind css?

I want the result to be like this

enter image description here

but this is what i get

enter image description here

with my svelte code:

<div
  style="background-image: url('{unsplash?.url}');"
  class="bg-black flex items-center justify-center min-h-screen bg-cover"
>
  <Authenticate />

<!-- here is my div -->

  <div class="block flex absolute bottom-9 left-5 h-16 w-16">
    <img src={unsplash?.author.avatar} alt={unsplash?.author.username} class="rounded-full" />
    <p class="inline-block text-blank ml-2">
      By <a class="inline-block" target="__blank" href={unsplash?.author.url}
        >{unsplash?.author.username}</a
      >
    </p>
    <p class="inline-block text-black">
      Find similar pictures on <a class="inline-block" target="__blank" href="http://unsplash.com"
        >Unsplash</a
      >
    </p>
  </div>
</div>

i used inline-block, but doesn't work

Solution

  • give more width in parent div from w-16 to w-[90%]