Create same height of multiple div using CSS

For creating the same height of blocks in HTML you can use either table property of CSS or Flex property.

1. To use the table you need to create a container as Table and block as Table Cell.

.ht-container {
    display: table;
}

.ht-block {
    float: none;
    display: table-cell;
    vertical-align: top;
}

<div class="ht-container" style="background:#eee;">
    <div class="ht-block" style="background: red">Hello</div>
    <div class="ht-block" style="background: green">Hello This is text contained maximum height. You can test it here.</div>
    <div class="ht-block" style="background: yellow">Hello</div>
</div>

Output:

2. Flex Property:

.ht-container-flex{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: nowrap;
}
.ht-block-flex {
  display: flex;
  flex-direction: column;
}

<div class="ht-container-flex" style="background:#eee;">
    <div class="ht-block-flex" style="background: red">Hello</div>
    <div class="ht-block-flex" style="background: green">Hello This is text contained maximum height. You can test it here.</div>
    <div class="ht-block-flex" style="background: yellow">Hello</div>
</div>

Output: