Equal height rows in a flex container

Question

As you can see, the list-items in the first row have same height. But items in the second row have different height

Answer 1

You can with flexbox:

ul.list {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: stretch;
    justify-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
li {
    width: 100px;
    padding: .5rem;
    border-radius: 1rem;
    background: yellow;
    margin: 0 5px;
}

  
title 1
  
title 2
new line
  
title 3
new
line