尾风文本对齐底部

Question

我有以下代码，该代码创建了两个＆lt; p＆gt;存储一些文本的标签：

<p v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%</p>
<p v-else class="text-red-500 text-lg font-bold">{{my_value}}%</p>
<div class="inline-block align-bottom bg-yellow-500 align-text-bottom">
   <p class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</p>
</div>

我正在尝试拥有最后一个＆lt; p＆gt;与第一个相比，标签对齐底部。我已经尝试放置＆lt; p＆gt;当前在＆lt; div＆gt;内外A＆lt; div＆gt;标签，但我似乎无法正确地找到结果，目前看起来像这样：

我希望“ tsa”文本出现在这里：

​我需要改变我目前得到的方式吗？

注意：我已经强调了＆lt; div＆gt;在黄色中仅显示文本不与底部保持一致。

Answer 1

您可以通过为所有＆lt; p＆gt; 标签添加flex-container来解决问题。

  <div class="flex items-baseline">
    <p v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%</p>
    <p v-else class="text-red-500 text-lg font-bold">29%</p>
    <p class="text-gray-500 text-sm ml-1">tsa</p>
  </div>

Answer 2

您可以按照以下代码获取解决方案

<script src="https://cdn.tailwindcss.com"></script>


<div v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}% 
  <span class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</span>
</div>

<div v-else class="text-red-500 text-lg font-bold">{{my_value}}% 
  <span class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</span>
</div>