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

Title Divider Right

I am looking to add a divider to the right of a section title on my webpage. Here is what I have tried: I attempted this code, but here is the result: Here is the code snippet: <h4 class="section-title">Lastest From Blog</h4> .section-title ...

htmlcss

Can a single component support multiple v-model bindings simultaneously?

Having a component used in two different places with an <input v-model="model" >, I face the challenge of watching this v-model in my component. The issue arises as the model changes - one place has model = array.val1 while the other has model = arra ...

vue.js

Reset functionality for input selector is malfunctioning

My HTML code looks like this: <input type="number"> <br> <input type="number"> <br> <input type="number"> <br> <button>+</button> In my JS script, I have the following: $('input').on('c ...

javascriptjqueryhtml

Filtering controls within a table are not displayed in VueJS

I have been attempting to implement date filtering in my data table based on a demo I followed. Despite meeting the filter requirements, no results are being displayed which is perplexing. Below are the imports and data from the file containing the table: ...

javascripthtmlvue.jsfilterdatatables

Learn to effectively incorporate intersection observer polyfill with Vue cli 3 in your projects

Is it better to include the IntersectionObserver polyfill in a webpack config like vue.config.js, or should I load it directly in a .vue template using imports? ...

vue.jsintersection-observer

Navigation dropdown menu with the latest Bootstrap 4 features

Attempting to recreate the design from Codepen using Bootstrap 4. The current progress can be viewed in this Codepen (drop down with 2 columns), which is assisting with online tutorials. Here's the HTML for the Navbar: <nav class="navbar navbar- ...

jquerycsstwitter-bootstrapbootstrap-4

The error message "npm run dev Error: The derived class t must have a greater number of constructor arguments than its base class" is indicating a mismatch in the number of constructor arguments between

When using vue with Laravel 5.8 in Vagrant, I encountered an error while running npm run development as shown below: root@ubuntu-xenial:/vagrant/webroot# npm run development > @ development /vagrant/webroot > cross-env NODE_ENV=development node_modu ...

node.jsvue.jsnpm

Center element horizontally at a specified breakpoint and below

Can I use Bootstrap 4 utilities to horizontally center an element like a <select> within a col at a specific breakpoint and below? I want to achieve this without using custom CSS. For instance, I want to center a <select> at xs and sm breakpoi ...

csstwitter-bootstrapbootstrap-4

Adding a uniform header and footer across all pages simultaneously in HTML

I am currently working on a project where I want to apply the same header and footer design from my homepage to all pages. However, I need a method that allows me to update the header and footer in one place, so that any changes I make will automatically r ...

javascriptjqueryhtmlcssdreamweaver

Guide on integrating Vuex into a Vue 2.6.14 project

Initially, I started working on a Vue project without using Vuex. However, upon realizing the necessity of Vuex for the project, I went ahead and added Vuex using npm. Subsequently, I populated a file named store.js with Vuex boilerplate code. Despite the ...

vue.jsvuex

Storing the value of the current vertical scroll position in a variable using jQuery

I'm currently dealing with a challenge that involves using the value of (window).scrollTop() as a crucial variable in my project. What I aim to accomplish is to retrieve and utilize the specific scroll value at a particular moment within an if stateme ...

javascriptjquerycssscopescrolltop

Integrating SSL for Nuxt.js 3.9 in a Live Setting

I have a unique project in the works, where I am combining Vue.js/Nuxt.js frontend with Java Spring backend. To streamline deployment, I containerized both components into a single Docker image and then deployed it to a Kubernetes cluster on a different ne ...

node.jsvue.jssslnuxt.js

Is it possible to conceal or encrypt JSON data or header information in HTTP requests and calls?

I am currently developing a full stack website with Flask, Vuejs and SQLite3. I have been using axios to make backend calls from the frontend. However, I noticed that when I make 'GET' requests using axios (Vuejs) to the backend on a particular r ...

httpvue.jsflaskaxios

series of lines including <ListItemText>

https://i.sstatic.net/L8FUC.png I have been using Material-ui with react. Currently, I am working on creating a list in React that contains long text. However, when the text is too long, it is displayed as a single line which is not what I want. I would ...

cssreactjsmaterial-ui

Three.js is failing to render within a specified div

My current project involves utilizing three.js to create a cube rendering. Despite the cube appearing on the screen, I am facing issues with getting it to display within the specified div element and in the desired style. HTML: <div id="render"> & ...

javascripthtmlcssthree.js

Managing the transition of the object in question

I am in the process of designing a navigation bar. I have created an array to store the information of the tabs present in the nav bar. tabs: [ { name: 'All',id: "dash.courses.all", to: 'all', curre ...

javascriptvue.jsvuejs3

Is it possible to automatically play a sound clip when the page loads?

Is there a way to automatically play a sound clip when my page loads? Are there any specific JavaScript or jQuery methods I can use for this, as I am developing my page using PHP. ...

javascripthtmlaudio

Tips for resizing a larger image to display only a specific portion in CSS (and incorporating JS if needed)

I need to resize an image that measures 1024x1024 and is segmented into 4 quadrants: My goal is to reduce the size of this image so that quadrant 2 is 256x256 while masking out or hiding the remaining 3 quadrants, displaying only the desired section on th ...

javascriptjqueryhtmlcss

Preventing Double Click Events on jQuery Spinner

I have been working on an option picker, but now there is a new requirement to make the options configurable. While this shouldn't be too difficult, I am facing some issues with the option picker: Currently, when an item is double-clicked, it will ge ...

javascriptjqueryhtml

Adjust the background shade of the HTML <area> tag

I have an image containing over 100 geometrical shapes, each with unique sizes and dimensions. I utilized image mapping to assign IDs to each <area> tag such as <area id="1">. I stored information in a MySQL database about each shape, ...

phpmysqlhtmlcss