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;
}