HTML5/CSS align list-items depending on other columns mutual height

When working with HTML5 and CSS, aligning list items across columns of different heights is a common layout challenge. Using CSS Flexbox provides an elegant solution for creating flexible, responsive columns with proper alignment.

Basic Flex Layout Structure

The wrapper container uses display: flex to create a flexible row layout:

.wrap {
    display: flex;
}

.wrap .col {
    flex: 1 0 33%;
}

The flex: 1 0 33% property means each column will grow equally, never shrink below its content size, and start with a base width of 33%.

HTML Structure Example

<div class="wrap">
    <div class="col">
        <div class="content">
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
            </ul>
        </div>
    </div>
    <div class="col">
        <div class="content">
            <ul>
                <li>Long content item 1</li>
                <li>Long content item 2</li>
                <li>Additional item</li>
                <li>More content</li>
            </ul>
        </div>
    </div>
    <div class="col">
        <div class="content">
            <ul>
                <li>Item A</li>
                <li>Item B</li>
                <li>Item C</li>
            </ul>
        </div>
    </div>
</div>

Vertical Alignment Options

To align list content to the bottom of each column regardless of height differences:

.col {
    display: flex;
    flex-direction: column;
}

.col .content {
    margin-top: auto;
}

For center alignment, use:

.col .content {
    margin: auto 0;
}

Complete CSS Solution

.wrap {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.wrap .col {
    flex: 1 0 33%;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    padding: 15px;
}

.col .content {
    margin-top: auto; /* Align to bottom */
}

.col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.col li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

Key Benefits

Flexbox provides several advantages for list alignment:

• Equal height columns: All columns automatically match the tallest column's height
• Flexible content alignment: Content can be aligned to top, center, or bottom
• Responsive design: Columns adapt to different screen sizes
• No JavaScript required: Pure CSS solution

Browser Compatibility

Flexbox is widely supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For older browser support, consider using CSS Grid or traditional float-based layouts as fallbacks.

Conclusion

CSS Flexbox simplifies list item alignment across columns of varying heights. The combination of display: flex on the wrapper and margin-top: auto on content provides flexible, responsive column layouts with precise vertical alignment control.