In layouts using Flexbox, there are times when you do not want the column heights to be aligned. In such cases, it is possible to set each item to a different height by using align-items: flex-start;
.
This style rule allows items in a Flex container to adjust their height to match their own content. That is, the height of each item is independent of other items and is automatically adjusted based on its own content.