Problem: Table Display Equal Height

easy
15 min
Try to leverage CSS display: table and display: table-cell to ensure two side-by-side columns always share the same height without Flexbox.

Problem description

You have two <div class="column"> elements inside a parent <div class="container">. Use CSS to mimic table behavior so that both columns automatically match heights.

Goal

Make each .column element align in height to its sibling using table-display CSS properties.

Constraints

You may only modify CSS; the HTML structure must remain unchanged and JavaScript is not allowed.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.

Problem: Table Display Equal Height

easy
15 min
Try to leverage CSS display: table and display: table-cell to ensure two side-by-side columns always share the same height without Flexbox.

Problem description

You have two <div class="column"> elements inside a parent <div class="container">. Use CSS to mimic table behavior so that both columns automatically match heights.

Goal

Make each .column element align in height to its sibling using table-display CSS properties.

Constraints

You may only modify CSS; the HTML structure must remain unchanged and JavaScript is not allowed.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.