How to resize the top div according to the bottom div

Question

I have a top div with chart and bottom div contains four rows at the end of each row i have close icon on click of that close icon the particular row disappears, so that the remaining rows should go down the top div should occupy the remaining space how to do it in css or javascript. I am using the concept of ng-repeat from Angular JS so that the rows are getting repeated.

Answer 1

If the number of rows below may change, I'd suggest using flexboxes. On the parent div (which wraps both chart and rows):

display: flex;
flex-direction: column;

And on the chart-wrapper:

flex: 1 0 0%; 

This will make the chart-wrapper div take all the remaining space of the parent div. If you'd like to support older browser, don't forget vendor prefixes:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;

And:

-webkit-box-flex: 1 0 0%;
-moz-box-flex:  1 0 0%;
-webkit-flex:  1 0 0%;
-ms-flex:  1  0 0%;

If you haven't already, take some time to read more about flexboxes. Some people claim that this is the best things that was added to CSS over years, and I have to agree - they solve a lot of layout problems.