CODEWITHSUNDEEP
csstailwind-css
Chris Farrugia
Chris Farrugia

Reputation: 1046

How do I get a title to be on the same line?

I cannot get "Chris Farrugia" and "5 Stars" to be on the same line. In the CodePen, you'll see that my name is actually lower than the 5 Stars to the right.

In Tailwind, how do I get those two on the same line?

body {
  background: #e3e3e3;
  padding: 3rem;
}

figure {
  margin: 0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css" rel="stylesheet" />
<figure class="block flex">
  <img src="https://unsplash.it/250/175
" class="object-cover w-full rounded-l-lg">
  <figcaption class="bg-white p-5">
    <div class="text-right">5 Stars</div>
    <h3>Chris Farrugia</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, provident cupiditate tempora, aspernatur quos assumenda iure facilis enim velit ea doloremque, odit qui blanditiis asperiores molestias ullam? Quos tempore consequatur nulla, error doloremque
      sequi consequuntur cupiditate assumenda labore nihil suscipit!</p>
    <a href="#">Read More</a>
  </figcaption>
</figure>

Upvotes: 1

Views: 65

Answers (1)

doğukan
doğukan

Reputation: 27481

Add float-right class to "5 stars".

body {
  background: #e3e3e3;
  padding: 3rem;
}

figure {
  margin: 0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css" rel="stylesheet" />
<figure class="block flex">
  <img src="https://unsplash.it/250/175
" class="object-cover w-full rounded-l-lg">
  <figcaption class="bg-white p-5">
    <div class="text-right float-right">5 Stars</div>
    <h3>Chris Farrugia</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, provident cupiditate tempora, aspernatur quos assumenda iure facilis enim velit ea doloremque, odit qui blanditiis asperiores molestias ullam? Quos tempore consequatur nulla, error doloremque
      sequi consequuntur cupiditate assumenda labore nihil suscipit!</p>
    <a href="#">Read More</a>
  </figcaption>
</figure>

Upvotes: 2

Related Questions