Is there a way to align the content in my Flexbox rows to the top of each cell, resembling a table layout?

I am currently facing challenges in aligning my layout correctly, especially on resolving the final adjustments.

In the scenario described below, everything seems to work fine when the message_data <span> elements contain a single line of data. However, when one of those lines extends to multiple lines, it disrupts the alignment of rows within columns.

How can I ensure that the message_labels and message_data are all aligned at the top of each row, similar to a data table?

FLEXBOX NO DATA:

...
htmlcssflexbox

Answer №1

***** UPDATE 3

Here's a new example of using the grid that simplifies the code structure.

.table-grid {
  font-family: sans-serif;
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 25px
}
<div class="table-grid">
  <!-- ROW -->
  <div><strong>Label</strong></div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>

  <!-- ROW -->
  <div><strong>Label</strong></div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mauris sagittis, dictum neque eu, tempor dui. Pellentesque et tellus eu magna condimentum fermentum. Curabitur ac felis non ante cursus sollicitudin sed quis velit. Integer volutpat
    lectus vitae bibendum ornare.</div>

  <!-- ROW -->
  <div><strong>Label</strong></div>
  <div>Lorem ipsum dolor</div>
</div>

***** UPDATE 4

Check out another way to implement the grid layout.

.table {
  list-style: none;
  margin: 0;
  padding: 15px;
  background: slategray;
  display: grid;
  grid-gap: 20px;
}

.table>li {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid lightgray;
  color: #fff;
}
<ul class="table">
  <li>
    <span>
      <strong>Label</strong>
    </span>
    <span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </span>
  </li>
  <li>
... (remaining content)
  </ul>

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

Other elements are unable to conceal Material UI InputBase

Displayed below is a navigation bar that sticks to the top, followed by rows of InputBase components from material-ui. Despite setting the background color of the nav bar to white, the input always appears above the nav. This strange behavior stopped when ...

javascripthtmlcssreactjsmaterial-ui

Utilizing SetInterval for dynamically changing the CSS background image URL

I'm starting to feel frustrated with this situation... I have a solution where the CSS background is coming from a webservice. Currently, the system refreshes the entire page using HTML: <meta http-equiv="refresh" content="300" /> ... body { ...

javascriptjqueryhtmlcsssetinterval

Sticky positioning is not maintaining its position at the top

I've noticed a strange behavior where, when I scroll down, the yellow box goes on top of the blue box. I have set both boxes to have a position sticky so that they should stay in place and not overlap. However, I want only the orange box to be scrolla ...

javascripthtmlcssreactjsflexbox

How can Django implement dynamic CSS for a single item that changes its background dynamically?

I am looking to create a single CSS style that can dynamically change its background based on a Django variable. This becomes more challenging when dealing with a:hover. The initial static style.css code appears as follows: .titles-button h2 a { marg ...

cssdjangodynamic

Replacing defined WordPress CSS styles

I was considering posting this query on the Wordpress Stack Exchange platform, but it's more related to CSS than Wordpress. Unless I need to delve into the CSS files of a plugin to customize the styles, should I go there to ask this question? I am t ...

css

What is the best way to display a progress bar on a website to indicate loading status until the entire page has

Looking to display a progress bar or loading popup on my web page until it is fully loaded. The page is quite heavy due to the presence of an HTML editor using jQuery, which takes significant time to load. During this loading period, I want to have a prog ...

jqueryasp.nethtmlcss

Implement a horizontal scrollbar for your table in HTML

I need to implement a horizontal scroll bar for my table. Here is the HTML code: Even though I have utilized Bootstrap, the horizontal scroll bar is not working for this particular module. It works fine in other modules. The tbody data is added after an ...

javascripthtmlcssajaxbootstrap-4

I'm looking to incorporate a hover effect on a hyperlink within JEditorPane utilizing Swing in Java. How can I achieve this

After successfully implementing the hyperlink in jEditorPane through this link, I now aim to incorporate a hover effect to the hyperlink. I attempted to apply CSS using the following code: MyHTMLEditorKit kit = new MyHTMLEditorKit(); setEditorKitForConten ...

javahtmlcssswinghyperlink

JavaScript: create a button that dynamically changes size and color when scrolling

I have a pulsing button (#scrollarrow) at the bottom of my website that disappears as I start scrolling. The jQuery code responsible for this effect is as follows: $(document).ready(function(){ $(window).scroll(function(){ if ($(thi ...

javascriptjqueryhtmlcss

Limiting the draggable element within a compact container using jquery UI

I've been attempting to drag an <img> within a fixed-width and fixed-height container. Despite researching on Stack Overflow and finding this solution, it doesn't seem to work for my specific case. If you check out this fiddle I created, y ...

javascriptjqueryhtmlcssjquery-ui

Using JQuery, retain only the initial N elements in a list and discard the rest

I'm looking to streamline a list of items in the DOM by keeping only the first N items, ideally through the use of slice and remove methods. Could someone provide me with the JQuery syntax for removing items that come after the first N in the list? ...

javascriptjqueryhtmldomdom-manipulation

Why does the order of CSS styling impact my design outcome?

Within my CSS file, I have defined the following styles: .myDiv{ float:left; width:100px; height:100px; } .yellow{ background:#faf8c7; } .lightGrey{ background:#f8f8f8; } In my HTML code: <div class="myDiv lightGrey yellow">& ...

css

HTML - Align 3 tables horizontally with text below

I have successfully floated 3 tables next to each other using <table style="float:left;">. However, I am facing an issue where some text is being wrapped to the right side of the right-most table instead of being left-justified at the very ...

htmlcss

Semi-Transparent Photo Slideshow

Currently, I am in the process of developing a Pokedex-like feature for a project that I am working on. The functionality is working as expected, but there is one particular feature that I would like to implement. My goal is to display only certain element ...

javascripthtmlcsscarousel

Struggling to get image properly aligned using touch gestures

Currently, I am struggling with the task of centering my image based on the touch input that will drag it. For example, if the user touches the top right corner of the image, I want the image to automatically move so that its center aligns with that touch ...

javascripthtmlcss

What is the best way to create a continuous slideshow of images in JQuery that includes fade-in and fade-out effects with no need for user input or triggers?

Is there a way to create a seamless jQuery slideshow using CSS that runs continuously without requiring any user interaction such as mouse hover or click events? ...

jquerycssanimationslideshow

Tips for placing a button on top of an image

Greetings and well wishes during this unique period we're currently experiencing! Can anyone share how to position a button over an image (located here)? I am utilizing Visual Studio, Jekyll, and Github. After attempting to copy and paste the exact ...

htmlcssbuttonjekyll

centered calculation with an offset

Check out what I'm attempting here I am trying to keep an element in the center and have another element hug the left side of it. Essentially, I want the leftmost position of the left div to be right: calc(50% - 200px - (left's width)); The is ...

htmlcss

Cannot access PDF files on Android Chrome

I'm using a responsive bootstrap application and encountering an error when trying to open a PDF on mobile. I can open the PDF from my iPhone, but when trying to do so on Android Chrome, I receive a "media not supported exception" message. The applic ...

htmlspringgoogle-chrometwitter-bootstrap-3

Thymeleaf causing Spring IO POST form to redirect to incorrect URL

One of the challenges I'm facing while coding a website is with a form for uploading files. Ideally, when accessing the URL http://localhost:8080/uploadRevision/{docId}, it should lead to http://localhost:8080/uploadRevisionLanding and then redirect b ...

javahtmlspringformsspring-mvc