columns with same height

equal height divs with scss

by Mr_Vasu

HTML

<ul>
  <li>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam veritatis perspiciatis suscipit, deleniti dolore dolores vel assumenda provident sit laboriosam itaque et, ad facilis eum incidunt odio similique. Laborum, ut!</p>
    </div>
  </li>
  <li>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam veritatis perspiciatis suscipit, deleniti dolore dolores vel assumenda provident sit laboriosam itaque et, ad facilis eum incidunt odio similique. Laborum, ut!Lorem ipsum dolor sit
        amet, consectetur adipisicing elit. Aperiam veritatis perspiciatis suscipit, deleniti dolore dolores vel assumenda provident sit laboriosam itaque et, ad facilis eum incidunt odio similique. Laborum, ut!</p>
    </div>
  </li>
  <li>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam veritatis perspiciatis suscipit, deleniti dolore dolores vel assumenda provident sit laboriosam itaque et, ad facilis eum incidunt odio similique. Laborum, ut!</p>
    </div>
  </li>
  <li>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam veritatis perspiciatis suscipit, deleniti dolore dolores vel assumenda provident sit laboriosam itaque et, ad facilis eum incidunt odio similique. Laborum, ut!Lorem ipsum dolor sit
        amet, consectetur adipisicing elit. Aperiam veritatis perspiciatis suscipit, deleniti dolore dolores vel assumenda provident sit laboriosam itaque et, ad facilis eum incidunt odio similique. Laborum, ut!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Aperiam veritatis perspiciatis suscipit, deleniti dolore dolores vel assumenda provident sit laboriosam itaque et, ad facilis eum incidunt odio similique. Laborum, ut!</p>
    </div>
  </li>
  <li>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat vero, fugit corporis, sapiente aperiam dignissimos amet alias quibusdam voluptas nostrum quae...

SCSS

ul {
  display: table;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -16px;
  li {
    max-width: 100%;
    position: relative;
    padding: 16px;
    display: inline-block;
    vertical-align: top;
    float: left;
    width: 33.33333333%;
    div {
      background: tomato;
      padding: 10px;
      border: 1px dotted red;
      box-shadow: 0 2px 4px red;
      height: 100%;
      position: relative;
    }
  }
}