Align position absolute element content to bottom with only one element

Question

I have a position absolute div element with text content inside without any tag, like this:

<div class="element">
    This is some content...
</div>


.element{
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    overflow: hidden;
    padding: 10px;
    color: white;
}

I want to align that content to the bottom of the div, but without using more html tags(like this answer on a similiar question), to keep it simple.

How can I achieve this using css only?

Answer 1

You can achieve that with CSS flexbox like this:

.element {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  overflow: hidden;
  padding: 10px;
  color: red;
  background: green;
  display: flex;
  align-items: flex-end;
}

<div class="element">
  This is some content...
</div>