Making sure all items in the top row of Flexbox columns have the same height

Within my flex wrapper, I have multiple column components with various flex items inside. Each column displays content adjacent to each other.

The challenge is to ensure that the top item in each column has an equal height, creating a row-like effect. I'm looking for a solution that doesn't rely on fixed heights as it could cause display issues when users adjust font sizes or if the content length changes within a CMS. Can Flexbox be used to achieve this? If not, are there alternatives such as CSS Grid?

For example:

html:

<div class="wrapper">
  <div class="column">
    <div class="topRow">
      Some content
    </div>
    <p>Needs to align</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
  </div>
  <div class="column">
    <div class="topRow">
      Some content which is a bit longer
    </div>
    <p>Needs to align</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
  </div>
  <div class="column">
    <div class="topRow">
      Some content
    </div>
    <p>Needs to align</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
  </div>
</div>

css:

.wrapper { 
  display: flex;
  max-width: 600px;
}

.column {
  flex: 1 1 0;
  border-right: 1px solid black;
  text-align: center;
}

https://i.sstatic.net/Xt02k.png

UPDATE: A solution using Flexbox can be implemented like so:

html:

<div class="wrapper">
  <div class="column">
    <div class="header">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class="info">
      <div class="infoRows">
        <p>Needs to align</p>
        <p>Something</p>
        <p>Something</p>
        <p>Something</p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="header">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class="info">
      <div class="infoRows">
        <p>Needs to align</p>
        <p>Something</p>
        <p>Something</p>
        <p>Something</p>
      </div>
    </div>
  </div>
    <div class="column">
    <div class="header">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class="info">
      <div class="infoRows">
        <p>Needs to align</p>
        <p>Something</p>
        <p>Something</p>
        <p>Something</p>
      </div>
    </div>
  </div>
    <div class="column">
    <div class="header">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class="info">
      <div class="infoRows">
        <p>Needs to align</p>
        <p>Something</p>
        <p>Something</p>
        <p>Something</p>
      </div>
    </div>
  </div>
</div>

css:

.wrapper {
  display: flex;
  justify-content: center;
  flex-direction: row;
  @media (max-width: 900px) {
    flex-direction: column;
  }
}
.column {
  padding: 10px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.info {
  display: flex;
  flex: 1;
  align-items: end;
}
.infoRows {
  flex-direction: column;
  width: 100%;
}
.infoRows p {
  border-top: 1px solid black;
  text-align: center;
}

Output: https://i.sstatic.net/hWZSd.png

htmlcssflexboxcss-grid

Answer №1

I believe that by following this method as outlined in the comments, it will be beneficial for your situation.

table {
    width:100%;
    padding:0px 50px;
}
.column1 {
    background:red;
    height:50px;
}
.column2 {
    background:blue;
    height:50px;
}
@media (max-width:768px) {
    th,tr {
        width:100%;
        display: block;
        margin:10px 0px;
    }
}
<table class="table">
    <tr>
        <th class="column1">1</th>
        <th class="column2">1</th>
    </tr>
     <tr>
        <th class="column1">2<br>2<br>2</th>
        <th class="column2">2</th>
    </tr>
</table>

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

The layout of the divs becomes distorted when the window is resized

When adjusting the window size, all elements in the center become cramped and unresponsive. Even the navigation items in the header do not resize properly. Here is my Triangle.js file: import React from 'react' import { motion } from 'fram ...

htmlcssreactjs

Is there a way to create automatic line breaks in this text?

Is there a way to automatically ensure the span spans multiple lines? I am working with HTML and CSS. Below is a modified version of my code, as some parts are in PHP: <div style='border: 1px solid; padding: 10px; margin-top: 5px;'> < ...

htmlcssscaledevicedisplay

The scroll header remains fixed in size despite being responsive

I've been struggling to resize a fixed header when the page is scrolled. Unfortunately, I'm having trouble getting the header to adjust its size as the scrolling happens. $(document).scroll(function() { navbarScroll(); }); function navbarSc ...

javascriptjqueryhtmlcss

Positioning the subheading "perfectly beneath the main heading" for a clean and professional look

I'm feeling a bit lost when it comes to tasks like this. While I can easily design an entire website using html and css, I start to question my approach when faced with challenges like these. Could someone offer some guidance? My goal is to have a H1 ...

htmlcsslayout

The HTML 5 Validation is unsuccessful due to the presence of the "Attribute addthis:url not allowed on element a at this point." error

I am currently facing an issue on my MVC4 Project web page where I have implemented the ShareThis plugin to display share count for various posts. The code snippet looks like this: @{ string strShareThisURL = "addthis:url=\"" + mainURL +" ...

jqueryhtmlasp.net-mvc-4

I'm encountering a Parse error: syntax error, wherein the file unexpectedly reaches its end

I'm currently in the process of creating a personalized search engine that enables users to search using multiple fields. However, an error message stating "syntax error, unexpected end of file" keeps popping up, specifically on line 201 of my code, r ...

phphtmlsyntax

I am looking to expand my CSS/HTML menu with an additional sub-sub menu. What is the correct way to achieve this?

This is my current CSS code that I am working on. I am trying to create a multi-level menu in Blogger with submenus, sub-submenus, and sub-sub-submenus without disrupting the existing formatting. .top-nav { background-color: #f9f9f9; background: t ...

htmlcss

Discover the quick method of retrieving the checkbox value instantly

Looking for a way to track when a checkbox is checked using Angular This is the current setup: <div class="checkbox" ng-repeat="item in items"> <input type="checkbox" ng-model="test[item.id]" ng-click="getID()" ng-checked="checkAll"/> {{ ...

javascripthtmlangularjs

Older versions of Internet Explorer, specifically IE 8 and below, are causing issues with iframe

I am currently working on a website that includes an embedded Vimeo video. The majority of our target audience uses IE8 or older, and interestingly enough, most of them have their browsers zoomed to 125% view. Unfortunately, while everything else on the si ...

cssinternet-exploreriframezooming

A guide to programmatically downloading a file with JavaScript on Internet Explorer

I'm currently facing a challenge with my web page. There is a button that, when clicked, should generate a CSV file (by converting from JSON) for the user to download. I've implemented the logic based on this jsfiddle, and it works perfectly in C ...

javascriptjqueryhtmlcsvinternet-explorer

Unable to modify variable values in AngularJS

I'm currently utilizing AngularJS along with the "Angular Material" implementation (found here: https://material.angularjs.org/latest/#/) One of the components I'm using is the SideNav component: https://material.angularjs.org/latest/#/demo/mate ...

javascripthtmlangularjs

Using jQuery for slide shows in Ruby on Rails framework

I'm attempting to create a slideshow using jQuery and have the images stored in an array. However, I'm struggling with the implementation of the slideshow functionality. I've checked out 'http://jquery.malsup.com/cycle/' for guidan ...

jquerycssruby-on-railsajax

How to extract hover CSS property from a Selenium WebElement using XPath in Python

Is there a way to detect if a button changes its background color on hover? I know how to get the cursor property: print webElement.value_of_css_property('cursor') But I am unsure how to capture the hover property. ...

pythoncssxpathselenium-webdriver

Conceal the Standard Select Dropdown Arrow in Internet Explorer 9

VIEW DEMO I attempted to use the CSS property appearance: none; to hide the select dropdown arrow, but it still shows in IE9. Refer to the image for clarification. Does anyone have a solution to hide the arrow using either CSS or jQuery? Below is my cod ...

jqueryhtmlcssinternet-explorer-9

What is the most efficient way to transform HTML into React components effortlessly?

I have been attempting to automate the process of converting HTML into React components. I followed the link below to automatically convert HTML into React components: https://www.npmjs.com/package/html-to-react-components However, I encountered an issue ...

javascripthtmlreactjsnpm

How can a method inside an object property of the same class be invoked in JavaScript?

I'm faced with a bit of confusion here. I have a class property called hotspot of type object, declared as follows: Cannon.prototype.hotspot = {stuff: this.blah(...) }; The method blah() is actually a prototype of the same 'class': Canno ...

javascripthtmlprototypejs

An even flexbox grid featuring content of varying sizes and dividers

I am currently in the process of working on a .psd template and utilizing Bootstrap 4. I have encountered an issue with one section that contains multiple rows and columns with varying content. The main problem is with one column where the text inside the ...

htmltwitter-bootstrapcssflexbox

Adjust the width of a div element to a specific size, center the div horizontally, and justify

My issue may be small, but I am struggling to find a solution. I have a content header that is 864px wide with a background image repeated vertically and a footer image. I now have a <div> positioned over the background image and I want it to be 855p ...

htmlcss

Guide on converting a JSON containing nested JSONs into an HTML table

Currently, I am working with a JSON data structure that contains nested dictionaries. My goal is to create an HTML table where each top-level key serves as a column in the table. The inner key-value pairs should be represented as a single text within cells ...

javascripthtmljsondynatable

Is it possible for a website to be compromised by incorporating CSS within HTML code?

I'm currently working on developing a shopping cart component in React, but my supervisor has advised against using CSS directly in the HTML markup due to security concerns. While I understand the importance of good coding practices, I fail to see how ...

htmlcssreactjsmaterial-uiwebsecurity