How to make the height of all div are equal? - html

Question

I have been fixing my codes since last night, I cannot add more height: 100% in some class names because it just messed up the output worse.
This is my codepen -> https://codepen.io/sasddd/pen/QWKPPwg
Just view this in details view so you can see the difference in spaces.
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;
}
}
}

Answer 1

Here something that you could try:
Refer to this answer, edit class content__title to make it fixed lines.
Remove justify-content: center; align-items: center; from class content__wrapper--event to make the content not in center.

Answer 2

I just play with my codes and I created a new container and added height: 100%;. That's it!