<div class="bg">
<div class="white">
<div class="white-box">
КАкой-то текст КАкой-то текст
КАкой-то текст КАкой-то текст КАкой-то текст КАкой-то текст КАкой-то текст КАкой-то текст КАкой-то текст КАкой-то текст КАкой-то текст КАкой-то текст КАкой-то текст КАкой-то
текст КАкой-то текст КАкой-то текст КАкой-то текст КАкой-то текст КАкой-то текст текст КАкой-то текст КАкой-то текст КАкой-то текст КАкой-то текст КАкой-то текст текст КАкой-то текст КАкой-то текст КАкой-то текст КАкой-то текст КАкой-то текст текст
</div>
</div>
<div class="gray">
<div class="gray-box">
КАкой-то текст
</div>
</div>
</div>
.white {
background: white;
width: 100%;
height: 50vh;
display: flex;
justify-content: center;
align-items: flex-end;
}
.white-box {
padding: 20px;
width: 80%;
background: #C4C4C4;
}
.gray-box {
padding: 20px;
background: white;
width: 80%;
}
.gray {
height: 50vh;
text-align:center;
width: 100%;
background: #C4C4C4;
display: flex;
justify-content: center;
align-items: start;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.