Increase div to one direction using css only - html

Question

I have this code that I need the div to resize vertically as the text inside increases. The bottom should remain fixed as div increases upwards
<div class ="div-increase">commodo sit amet, posuere lobortis quam. Vestibulum d
</div>
How can I achieve this using css
.div-increase{
position: relative;
display: inline-block;
width: 210px;
height: 100px;
max-width: 210px;
max-height: 250px;
min-height: 1.5em;
border: 1px solid blue;
padding: 3px;
border-radius: 10px;
line-height: normal;
color: red;
}

Answer 1

you can achieve this using flexbox with flex-direction: column-reverse. I've also made the div editable, so you can try the snippet typing some extra text:
.div-increase {
position: relative;
display: flex;
flex-direction: column-reverse;
width: 210px;
height: 100px;
max-width: 210px;
max-height: 250px;
min-height: 1.5em;
border: 1px solid blue;
padding: 3px;
border-radius: 10px;
line-height: normal;
color: red;
}
<div class="div-increase" contenteditable="true">commodo sit amet, posuere lobortis quam. Vestibulum d
</div>
here is my favorite flexbox cheat-sheet, the official docs and browser support