如何获得标题在同一行？

问题描述

我无法让“克里斯·法鲁吉亚”和“ 5星”排在​​同一行。在CodePen中，您会看到我的名字实际上比右边的5星小。

在Tailwind中，如何将这两个放在同一行？

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>

解决方法

将float-right类添加到“ 5星”。

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>