[Vuejs]-Tailwind text align bottom

by

4👍

✅

You can solve your issue by adding a flex-container for all your <p> tags.

  <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>

enter image description here

👤Eduardo

0👍

You can follow the below code for the solution

<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>
👤user18265126

Leave a comment