Как разместить текст в самом низу блока div?

Question

Мне нужно разместить текст в самый вниз, без использования margin.

Как это можно сделать?

<div style="height: 400px; background: #baa970;">
  <p style="vertical-align: bottom;">text</p>
</div>

Answer 1

div {
  display: grid;
  align-items: end;
  height: 400px;
  background: #baa970;
}

<div>
  <p>text</p>
</div>

div {
  display: flex;
  align-items: flex-end;
  height: 400px;
  background: #baa970;
}

<div>
  <p>text</p>
</div>

div {
  position: relative;
  height: 400px;
  background: #baa970;
}

p {
  position: absolute;
  bottom: 0;
}

<div>
  <p>text</p>
</div>

Только конкретный элемент (на Flex):

div {
  display: flex;
  height: 400px;
  background: #baa970;
}

.particular-item {
  align-self: flex-end; 
}

<div>
  <p class="particular-item">text</p>
</div>