How do I align the content of table cells to the top of a row using Tailwind CSS?

I'm currently exploring ways to position the contents of a table cell at the top of the row.

  <tr className="flex-1 items-center align-top">

    <td className=" py-1 pl-1 pr-1 text-sm sm:pl-6">
       <div className="flex-1 items-center align-top">
           <div className="flex-1 items-center align-top">
                <p className="flex-1 items-center align-top">
                    title 
                </p>
                <p className="flex-1 align-top">
                    short multi line sentence about one third the length of the sentence in the next column, I want both cells to align to the top.
                </p>
           </div>
        </div>
    </td>

I came across this informative article that suggests using items-center in the flex class for vertical alignment, but it's still rendering at the center.

The following column has double the data, causing its content to be vertically centered. My goal is to have it aligned with the top of the row.

Any suggestions on how I can achieve this?

csstailwind-css

Answer №1

According to John Li's insight, it seems like using flex would be more appropriate in this scenario, as flex-1 is not very useful unless it is nested within a container that has flex.

You can achieve the desired result without the extra wrapper divs, and your cell content should align to the top even without needing to use items- or align-.

<table>
  <tr class="flex gap-4 p-1 text-sm sm:pl-6">
    <td>
      <p>title</p>
      <p>short multi line sentence about one third the length of the sentence in the next column, I want both cells to align to the top.</p>
    </td>
    <td>
      <p>Longer multiline sentence...</p>
    </td>
  </tr>
</table>

Check out the sandbox demo here: https://play.tailwindcss.com/QPUuacC4Rj

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

If the height of the window changes, then update the CSS height accordingly

Here is the code that I am using: $(document).ready(function() { $('body').css('overflow', 'scroll'); var heightWithScrollBars = $(window).height(); $('body').css('overflow', 'auto') ...

jquerycss

Incorporate a Fadein effect into the current CSS for mouseover link interaction

Is there a way to enhance my current css code for a mouseover link with a background image by adding a fade in and out effect? What's the most effective method to achieve this using jquery? .sendB { width: 100%; height: 125px; background: ...

javascriptjquerycssfadein

Is it possible to vertically and flexibly center a <div> over an <img>?

Check out this HTML: <div class="float"> <img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" /> <img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" /> <img class="left" src="mattWaterRun.jpg" ...

htmlcss

Filled with challenges in React

Having trouble with loading loaders.css file due to an error. The module build failed because it couldn't find the 'daisyui' module, leading to a stack of require calls: F:\VS code\three js\material tailwind\Clone\ ...

javascriptnode.jsreactjswebpacktailwind-css

Arrangement of Divs Using CSS and HTML

Working on a New Website Hey there, I could really use some assistance in recreating the design shown in this image for my website project. I've made some progress but it's not quite coming together as expected. I'm struggling with positio ...

htmlcsspositioning

Changing text on a button with JavaScript toggle functionality: A step-by-step guide

I am looking to implement a feature where I can hide and show overflow content in a div. When I click on the expand button, it expands the content. However, I want this button to toggle and change text as well. Thank you! function descriptionHeightMo ...

javascriptjqueryhtmlcss

iPhone 5s landscape mode causing issues with media query

I have been testing a media query that looks like this: @media screen and (max-width: 600px) { .blah { font-size: 1.25rem; } } When I test this in responsive mode on browser dev tools, everything looks great. I can see all the changes as I resize ...

htmlcssiphonemedia-queries

The styling of the Material UI autocomplete listbox does not affect its appearance

I am working on an autocomplete feature that groups items by titles. I am trying to adjust the height of the first group to be different from the rest, but I am facing some challenges since there is no unique identifier for the ul component. To work around ...

cssreactjsmaterial-ui

Looking to adjust line-height property for text with different line heights

I am struggling with adjusting the line-height of row-based text content in HTML enclosed in <p> tags. The challenge I'm facing is that the text could vary in length, resulting in either one or two lines. If it's a single line, it should co ...

jqueryhtmlcssheightline

Clicking on the label for Semantic UI Radio Buttons does not result in a check

Is anyone else experiencing difficulty with radio buttons not checking when the label is clicked? Oddly enough, this issue does not seem to be present on Semantic's website. For reference, here is Semantic UI Documentation where the radio buttons wor ...

jqueryhtmlcsssemantic-ui

Static HTML side navigation bar

Is there a way to troubleshoot my rigid right navigation bar? My apologies if this is too broad of an inquiry. In essence, I'm aiming for a website design with two columns featuring a header and footer. The styling for the header, footer, and overall ...

htmlcssnavigationsidebar

What could be causing the issue with this flexbox footer not functioning properly on a mobile device?

Currently, I am honing my skills in using flexbox to create footers. Although the footer layout I have designed looks great on a desktop screen, it unfortunately doesn't display correctly on mobile devices. You can view the footer layout I have been ...

htmlcssmobileflexboxfooter

Guide to implementing a feature where clicking on a specific section of the background image triggers a transition to another website using HTML

Is it possible to set up a background image with clickable regions that direct users to specific websites? ...

javascripthtmlcss

Toggle visibility of div element with a button press

Here is the div I have: <div class="margin-bottom hidden-xs"></div> This specific div is initially hidden on a small window size due to the bootstrap 'hidden-xs' class. However, I want it to be shown or hidden when the user clicks o ...

javascripthtmlcssangularjsbootstrap-4

How to set a DIV width in CSS to enable scrolling on an iPad 2

Greetings, I have a simple CSS query that I would like assistance with. I am currently grappling with the concept of managing widths in CSS. I have an absolute positioned <div> that contains a relatively wide table. The width of the <div> is s ...

cssipadwidthswipe

Issue with Navigation Bar when reducing screen width

I'm currently working on creating a navbar that includes an image logo, title, navigation links, and social links. To achieve this, I've divided the navbar into 4 separate divs. However, I've noticed that when I decrease the screen width usi ...

htmlcssflexboxwidthmargin

Aligning a div beneath other divs using Bootstrap 5

My HTML code is very basic, with no CSS involved. It's supposed to show a title at the top of the page followed by some centered text. Here's what I have: <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" cl ...

htmlcsstwitter-bootstrapbootstrap-5

Ways to create a vertical bottom-up tree view using d3.js

I am trying to create a reverse tree view, starting from the bottom and moving up. What modifications do I need to make? Here is the link to my JS Fiddle: ...

javascriptjquerycssd3.jssvg

Child element fails to show up upon parent element's appearance

My issue involves having two divs nested inside each other. I programmed it so that when I hover over a link, both divs should appear. Strangely, only the parent div is visible while the child div remains hidden. However, if I set the parent to "display:bl ...

htmlcssparent

What is the best way to position my logo on top of the stunning space background?

Click here to check out the code on CodePen Please take a look at my code on codepen.io. I am new to Stack Overflow so please be patient with me if I make any mistakes. ;-; I currently have my logo (https://i.stack.imgur.com/W0nWc.png) included in the co ...

javascripthtmlcsslayer