SOURCE

<div>
	<h3>SameHeightLayout</h3>

	<div class="container flex__container">
		<div class="item1 flex__item1"></div>
		<div class="item2 flex__item2">
			<h4>Flex</h4>
		</div>
		<div class="item3 flex__item3"></div>
	</div>

	<div class="container grid__container">
		<div class="item1 grid__item"></div>
		<div class="item2 grid__item">
			<h4>Grid</h4>
		</div>
		<div class="item3 grid__item"></div>
	</div>
</div>

.container {
    /* width: 300px; */
    height: 300px;
    margin: 10px;
    border: 2px solid rgb(8, 51, 94);
}

.item1 {
    background-color: #999;
}

.item2 {
    background-color: #f3f3f3;
}

.item3 {
    background-color: #999;
}

.flex__item1 {
    width: 20%;
}

.flex__item2 {
    width: 60%;
}

.flex__item3 {
    width: 20%;
}

.flex__container {
    display: flex;
}

.grid__item {
    width: 100%;
}

.grid__container {
    display: grid;
    grid-template-columns: 20% 1fr 20%;
}