Increase div to one direction using css only

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