CSS - Equal Height Columns?

Question

In CSS, I can do something like this:

But I\'ve no idea how to change that to something like:

---

Is this possible with CSS?

Answer 1

Use Flexbox to create equal height columns

* {box-sizing: border-box;}

/* Style Row */
.row {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
}

/* Make the columns stack on top of each other */
.row > .column {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* When Screen width is 400px or more make the columns stack next to each other*/
@media screen and (min-width: 400px) {
  .row > .column {    
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

  
  

    
Column 1
    
Some Text...
    
Some Text...
  
  
  

    
Column 2
    
Some Text...
    
Some Text...
    
Some Text...
    
    
Some Text...
    
Some Text...
    
Some Text...
    
Some Text...
  
  
  

    
Column 3
    
Some Text...
    
Some Text...
    
Some Text...