Div resize according to increase in other div css only

Question

I have these two divs. The inner div needs to make the outer div resize as the div fills up with words. Simply the outer div should resize as the content of the inner div increases.

Note: The inner div increases height upwards hence the outer div should also increase upwards

Check out this fiddle https://jsfiddle.net/kevinrobert3/zguo4vbc/51/ as the words in inner div increase and the div increases in height, I need the outer div to match up and increase too

<div class="wrapper" id="in">
  <div class="inner-div" id="inner-div">
    it is a long established fact that a reader will be distracted by 
    the readable content of a page when looking at its layout. 
  </div>
</div>

The css for it is

.wrapper{
    width:70%;
    max-height: 500px;
    min-height: 150px;
    position: relative;
    background-color: aqua;
    top: 90px;
    height: auto;

}
.wrapper .inner-div  {
    position: absolute;
    display: inline-block;
    bottom: 0px;
    max-width: 230px;
    min-height: 1.5em;
    border: 2px solid blue;
    margin-left: 55px;
    padding: 4px;
    border-radius: 4px;
    line-height: normal;
    color: red;
}

Answer 1

I think that's because of your position: absolute; in your inner-div. Removing it resolves your problem. But maybe you needed it for some other reason ?

Answer 2

You can use

display: flex;
align-items: flex-end; 

in .wrapper and remove position: absolute; in .inner-div . Just like this: https://jsfiddle.net/1zfwso06/