I have a responsive grid containing cards. Each card contains two divs, stacked in a column, with different length content in each. I need the second div in all cards to have the same vertical start point (even though the content above is different length and the content inside the second div is different length). Like this:
justify-content: space-between doesn't work because it simply fixes the second div to the bottom of the card. I don't know how to do this?
.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 5rem;}.card { border: 1px solid; display: flex; flex-direction: column; justify-content: space-between; }.card div:first-child { color: red;}.card div:last-child { color: blue;}<div class="grid"><div class="card"><div>First div with short content</div><div>Second div with content</div></div><div class="card"><div>First div with much longer content that takes up more space</div><div>Second div with content and a bit more </div></div><div class="card"><div>First div with much longer content that takes up more space and more content again and again and some more text and again</div><div>Less content</div></div></div