Bottom-aligning text in Tailwind CSS

Creating two <p> tags to store text:

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

Struggling with the alignment of the last <p> tag compared to the first. Current alignment issue depicted in the image below:

https://i.stack.imgur.com/Tr6Il.png

Desired alignment of the "tsa" text shown here:

https://i.stack.imgur.com/GqzTn.png

Suggestions on adjustments needed for current code set up?

Note: Highlighted yellow <div> to emphasize misalignment of text.

htmlcssvue.jstailwind-css

Answer №1

If you're looking to address your problem, consider incorporating a flex-container for all of your <p> elements.

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

https://i.stack.imgur.com/xRLGf.png

Answer №2

Check out the code below for a possible 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Shorten Text - React Native

I currently have a React Native application with a FlatList component. The logic I initially implemented was to display an Expand/Collapse arrow whenever the content at the 100th position in the list is not empty. However, I now realize that this approach ...

javascriptcssreactjsreact-nativetruncate

Icon for local system displayed on browser tab

I am currently trying to set a Browser Tab icon for the local system, but it is not working. However, when using an HTTP static icon, it works perfectly. Can someone please help me understand what the issue might be? PAGE 1 : Icon Not Showing <link re ...

javascriptjqueryhtmlajaxbrowser

When running the `vue-cli-service test:unit` command, an error involving an "Unexpected token" message related to the usage of the spread operator

Within my code, I am utilizing the destructuring operator. However, during the module build phase, I encountered an "Unexpected token" error. Any suggestions on how to resolve this issue without completely rewriting my code to avoid using the destructuring ...

javascriptvue.jsunit-testingtestingvue-cli

Beginning the deployment of a Nuxt SSR application on Azure with the build files

According to the Nuxt documentation, running yarn build will result in Nuxt.js creating a .nuxt directory containing everything ready for deployment on your server hosting. After reviewing a couple of other guides, it appears that additional items require ...

azurevue.jsdeploymentnuxt.jsserver-side-rendering

Showcasing certain elements as the user scrolls

Looking for a way to display an element (such as a div) when the user scrolls without using JQuery? Here's an example that tries to achieve this: var scroll = document.body.scrollTop; var divLis = document.querySelectorAll("div"); for(let i = 0; i ...

javascripthtmlcss

The Vuex store has been refreshed, but the DOM remains unchanged

I've scoured all the discussions on this topic and can't find a solution. My Vuex store is updating correctly, but the DOM isn't reflecting the changes. Here's a screenshot of the issue One of my getters, called returnAmazonCredential ...

vue.jsvuex

Troubleshoot: Unable to utilize mapActions with Vuex modules

Having trouble using mapActions to reference actions in my modules. The Vuex docs say that module actions are not namespaced by default, so they should be accessible like main store actions. Here's how I have things set up: Store import * as ModuleA ...

javascriptvue.jsvuex

Using VueJS for reactive binding效果

I am attempting to assign a class using the following syntax: :class="{active: favs.medium_title.fontWeight === 'bold'}" However, the fontWeight attribute is not yet defined when the component loads. This is an excerpt from my object: favs: { ...

javascriptvue.js

Customizing the size of dateBox icons in JQuery Mobile

Is there a way to increase the button size within the input box of a dateBox? Currently, it appears small and difficult to click accurately. Additionally, it would be beneficial if clicking anywhere in the input field could open the calendar, instead of ju ...

jqueryhtmljquery-mobile

Issue with white spaces in footer content in Chrome browser

Currently in the process of developing a website and encountering a strange bug that only seems to be affecting Chrome. Despite having the latest version of Chrome, it appears to be an issue that was prevalent in older versions (v18 - v20). The problem is ...

htmlcssgoogle-chromefrontend

Next.js production mode prevents CSS from loading properly

Issue Upon building and launching a production build of our application, the CSS fails to load. Inspecting the devtools reveals a multitude of errors and warnings: Possible Causes The problems do not occur when running the app in development mode. Othe ...

csswebpacksassnext.jswebpack-style-loader

Incorporate Vimeo video with full-width display

When embedding a Vimeo video on my website, I use the following code: <div class="fys-fp-content-wrapper"> <div id="fys-fp-video"> </div> </div> #fys-fp-video { position: relative; padding-bottom: 56.25%; padding-top: ...

htmlcssvideovimeo

Is there a way for me to align my div with my header on the same line?

HTML: <h2> RAN shares false news story about Hershey's Oil Commitment</h2> <div class="date"> <div class="number">27</div> <div class="month">Oct</div> </div> <p>The Rainforest Action Netwo ...

csshtml

Stay up-to-date with the latest headlines on your Android device!

I am currently developing an Android application and I need to retrieve the most recent news from this specific page, specifically the tab labeled "NYHEDER": Once I have retrieved the news, I plan to display it on the app's screen. I have come acros ...

androidhtmljsoup

Shifting divs to different positions upon clicking

I am currently working on a project where I have three divs in a container positioned next to each other. My goal is to make them change their positions when clicked. For example, clicking on the left div should move it to the center position. Here is my p ...

javascripthtmljquerycssjquery-animate

Can a hashmap variable be declared in HTML code?

Can a hashmap variable be set in HTML code? Here's an example: <form name="f1234"> <input type="text" name="map['foo1']" value="dog" /> <input type="text" name="map['foo2']" value="cat" /> </form> < ...

htmlhashmap

Play button icon is missing in Firefox when using absolute positioning

I'm currently experiencing an issue with my video gallery section. I have both normal and hover versions of a play button positioned above a preview image of a video. However, the play buttons are not visible at all in Firefox. You can view the page h ...

csscss-position

Unable to assign focus to textbox

In my chrome extension, I have implemented two text boxes - one for entering a URL and the other for LDAP. Upon clicking on the extension icon, a popup page opens where I automatically fill the URL text box with the current page's URL using the code s ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Is it possible to apply CSS based on a component's displayName?

Are you a CSS pro? I'm attempting to apply a class that will make all descendants of an element read-only, but for some reason the style isn't being applied as expected: #ComponentDisplayName * { -webkit-user-select: text; -moz-user-sel ...

javascripthtmlcssreactjscss-selectors

Retrieving an HTML element that has been added through DOM manipulation

After successfully creating a Jquery function that inserts a 'save button' into the page when a specific button is clicked, I encountered an issue with another function meant to be activated when the save button is clicked. The first function see ...

javascriptjqueryhtmldom-manipulation