Как сверстать эту нижнюю часть секции?

Для верстки нижней части секции можно использовать следующий HTML и CSS код:

HTML:

<section class="section">
  <div class="content">
    <!-- Верхняя часть секции -->
  </div>
  <div class="bottom-section">
    <!-- Нижняя часть секции -->
  </div>
</section>

CSS:

.section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}
 
.content {
  flex: 1;
}
 
.bottom-section {
  background-color: #f2f2f2;
  padding: 20px;
}

Этот код создаст секцию, в которой верхняя часть будет занимать все доступное пространство сверху, а нижняя часть будет иметь серый фон и отступы по 20px. Используя flexbox, мы распределяем пространство между верхней и нижней частями секции так, чтобы нижняя часть всегда оставалась внизу даже при изменении размеров окна браузера.