.equal-height-container {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap to the next line if space is insufficient */
  align-items: stretch; /* Default, but explicitly stated for clarity: makes flex items stretch to fill the height of the container or the tallest item in the row */
  gap: 20px; /* Space between columns */
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.equal-height-column {
  flex: 1; /* Each column takes up equal available space */
  min-width: 250px; /* Minimum width before wrapping */
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 15px;
  display: flex; /* Flexbox within the column for content alignment */
  flex-direction: column;
  justify-content: space-between; /* Pushes footer to bottom, content to top */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-radius: 5px;
}

.column-header {
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
  font-size: 1.1em;
}

.column-content {
  flex-grow: 1; /* Allows content to push footer down */
  margin-bottom: 10px;
  color: #555;
  line-height: 1.6;
}

.column-footer {
  text-align: right;
  font-size: 0.9em;
  color: #777;
}

/* Example HTML:
<div class="equal-height-container">
  <div class="equal-height-column">
    <div class="column-header">Short Content Card</div>
    <div class="column-content">
      <p>This is a short description for the first card. It's concise.</p>
    </div>
    <div class="column-footer">Learn More</div>
  </div>
  <div class="equal-height-column">
    <div class="column-header">Medium Content Card Title</div>
    <div class="column-content">
      <p>This card has a bit more content to demonstrate the equal height property. Flexbox ensures that all siblings in the row will match the height of the tallest one.</p>
      <p>Even with varied content, they stay aligned.</p>
    </div>
    <div class="column-footer">Read More</div>
  </div>
  <div class="equal-height-column">
    <div class="column-header">Long Content Card Example with Lots of Text</div>
    <div class="column-content">
      <p>This particular card is designed to have significantly more content than its peers. Observe how the other cards automatically stretch to match its height, thanks to the `align-items: stretch` property applied to the flex container.</p>
      <p>This is extremely useful for layouts like dashboards, product listings, or blog post previews where content length might vary.</p>
      <p>Another paragraph to make it even longer to ensure this is the tallest item.</p>
    </div>
    <div class="column-footer">Explore</div>
  </div>
</div>
*/