How to make the height of all div are equal?

I have been fixing my codes since last night, I cannot add more height: 100% in some classnames because it just messed up the output worse.

This is my codepen -> https://codepen.io/lyella/pen/QWKPPwg Just view this in details view so you can see the difference of the spaces.

This is the desired output ↓

Please someone help me. I don't know if I have to delete some divs or add more divs.

Here's my codes in PUG

.content    section.event      .container__content        .event__title-container          .title            .title__lines              h1.title__text EVENT        .content__item-container.content__item-container--event          a.content__item(href="#")            img.content__image.content__image--event(              src="https://i.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0"            )            .content__wrapper.content__wrapper--event              .content__date.content__date--event                p.content__date-text 22 Jun, 2020              .content__category-wrapper.content__category-wrapper--event                p.content__title さまざまな業種や形態の体験施策に携わってきた経験値を武器に難な状...況を乗り越える さまざまな業種や形態の体験施策に携わってきた経験値を武器に難な状...況を乗り越える                .event__title-line                  .event__description-container                    p.content__title--event 開催日：2020年12月24日                    p.content__title--event 開催場所：東京都 渋谷区                    p.content__title--event カテゴリ：フリーマーケット          a.content__item(href="#")            img.content__image.content__image--event(              src="https://i.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0"            )            .content__wrapper.content__wrapper--event              .content__date.content__date--event                p.content__date-text 22 Jun, 2020              .content__category-wrapper.content__category-wrapper--event                p.content__title 宮津満腹祭 うまいもん集まれ 2020年12月24日開催                .event__title-line                  .event__description-container                    p.content__title--event 開催日：2020年12月24日                    p.content__title--event 開催場所：東京都 渋谷区                    p.content__title--event カテゴリ：フリーマーケット          a.content__item(href="#")            img.content__image.content__image--event(              src="https://i.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0"            )            .content__wrapper.content__wrapper--event              .content__date.content__date--event                p.content__date-text 22 Jun, 2020              .content__category-wrapper.content__category-wrapper--event                p.content__title 宮津満腹祭 うまいもん集まれ 2020年12月24日開催                .event__title-line                  .event__description-container                    p.content__title--event 開催日：2020年12月24日                    p.content__title--event 開催場所：東京都 渋谷区                    p.content__title--event カテゴリ：フリーマーケット                    p.content__title--event カテゴリ：フリーマーケット  

Here's my codes in SCSS

// EVENT SCSS  .event {    position: relative;      &__title-container {      margin-top: 61px;    }      &__title-line {      border-top: 1px solid black;      margin-left: 6px;      padding-left: 20px;      height: 100%;    }      &__description-container {      display: inline-block;      border-left: 1px solid black;      height: 100%;    }  }  

// CONTENT.SCSS

.content {    position: relative;      &__image {      width: 380px;      height: 210px;      object-fit: cover;      object-position: center;      border: 5px solid white;        &--small {        border: 4px solid white;        width: 278px;        height: 156px;      }        &--category {        border: 4px solid white;        margin-top: 22px;      }        &--event {        border: 4px solid white;        height: 200px;      }    }      &__item {      display: flex;      flex-direction: column;      justify-content: flex-start;      align-items: center;      width: 378px;      color: black;      margin: 0;        &--small {        width: 278px;        margin-bottom: 31px;      }        &:not(:nth-child(3n + 3)) {        margin-right: 35px;      }        &--category {        // blank      }    }      &__item-container {      width: 1220px;      display: flex;      flex-wrap: wrap;      margin-top: 27px;      height: 100%;        &--small {        width: 907px;      }        &--category {        width: 100%;      }        &--event {        width: 100%;      }    }      &__date {      position: absolute;      margin-top: 5px;      left: -5px;      top: 38px;      height: 28px;      white-space: nowrap;      transform: rotate(-90deg);        &--small {        left: -10px;      }        &--category {        left: -25px;      }        &--event {        top: 170px;        left: 25px;      }    }      &__date-text {      font-size: 12px;        &--category {        font-size: 12px;      }    }      &__wrapper {      position: relative;      display: flex;      justify-content: center;      width: 100%;      height: 100%;      padding-top: 8px;      padding-left: 50px;        &--category {        padding-left: 12px;      }        &--event {        justify-content: center;        align-items: center;        width: 100%;        // height: 100%;      }    }      &__category-wrapper {      display: flex;      flex-direction: column;      justify-content: center;      align-items: center;        &--small {        //blank      }        &--sp {        //blank      }        &--event {        display: block;        width: 100%;        // height: 100%;      }    }      &__category-line {      border-left: 1px solid black;      margin-left: 6px;      margin-top: 15px;      padding-bottom: 5px;      padding-right: 8px;        &--small {        margin-left: -5px;      }    }      &__category-text {      font-size: 16px;      letter-spacing: 0.1em;      padding-left: 19px;      width: 338px;      max-width: 100%;        &--small {        width: 234px;        padding-left: 14px;      }        &--sidepanel {        width: 100%;        padding-left: 0;        line-height: 2.25em;      }        &::before {        content: " \25A0";        padding-right: 14px;        cursor: pointer;      }        &--skyblue {        color: blue;      }        &--islamicgreen {        color: green;      }        &--tawny {        color: yellow;      }        &--purple {        color: purple;      }        &--amaranth {        color: red;      }    }      &__title-line {      border-top: 1px solid black;      border-left: 1px solid black;      margin-left: 6px;      padding-right: 8px;      padding-bottom: 21px;      height: 100%;        &--small {        margin-left: -13px;        padding-bottom: 5px;        padding-right: 0;      }        &--category {        padding-bottom: 2px;      }        // &--event {      //   border-left: 1px solid $border;      //   margin-left: 6px;      //   padding-right: 8px;      //   height: 100%;      // }    }      &__title {      padding-top: 21px;      padding-left: 22px;      font-size: 24px;      font-weight: bold;      line-height: 1.5em;      width: 338px;      max-width: 100%;      height: 100%;        &--small {        padding-top: 13px;        padding-left: 15px;        padding-right: 8px;        font-size: 18px;        line-height: 1.44em;        width: 234px;      }        &--sidepanel {        font-size: 18px;        line-height: 1.5em;        padding-top: 0;        padding-left: 0;        width: 100%;      }        &--event {        padding-top: 13px;        padding-left: 15px;        padding-right: 8px;        font-size: 16px;        width: 234px;      }    }  }  

https://stackoverflow.com/questions/65838395/how-to-make-the-height-of-all-div-are-equal January 22, 2021 at 10:07AM