I need a layout where there are 3 columns with each containing a header section and content section. The headers of all 3 column has to be equal based on dynamic content length. The content section height can be based on its content.
Note: on smaller screen / if one column wraps only the first 2 column header should have the equal height. Since last header is below it can have content height to avoid white space.
I have tried with flex, grid and I dont want to use JS as there is jerk on applying the css.
Below is the css I have tried with
<style> .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .column { flex: 1 0 30.33%; border: 1px solid #ccc; padding: 10px; display: flex; flex-direction: column; } .header { font-weight: bold; text-align: center; display: flex; flex-direction: column; align-items: stretch; min-height: 100px; /* Adjust this value based on your needs */ border:1px solid red; } .details { text-align: center; flex: 1 0 auto; border:1px solid red; } .header > p { flex: 0 0 auto; }</style>