Moving div relative to dynamically growing list CSS - html

Question

I have one form on which all text fields are there and at the end there are 'save' and 'cancle' buttons. Between this last text field and buttons, there will be filename list that will populate dynamically as and when I will upload any file. Screenshot for the same is attached here. Size of this list is not fixed and thus, I want these buttons to shift down with every added file. I am not sure how can I adjust this movement of buttons dynamically. [see image 1]. And following is my current CSS code.
// Outermost div
.div-one {
position: absolute;
background-color: gainsboro;
height: 100%;
width: 50%;
}
// div for file list
.item-list {
width: 16em;
position: relative;
margin-left: -38px;
}
// div for buttons
.save-cancel-buttons-div{
position: relative;
top: 20%;
}
Following is my HTML code:
<div className="div-one1">
<Row>
<div className="item-list">
<Col xs={6} sm={6} md={6} lg={6}>
<If condition={this.state.files && this.state.files.length!=0}>
<ul style={{listStyle: 'None', fontSize: '16px'}}>
{this.state.files.map((value, index) => (
<li style={{paddingBottom: '5px', border:'5px'}}
key={`item-${index}`} >
<span>{value.file_name}
<span style={{paddingLeft: '20px'}}
onClick={() => this.onDeleteItem(value, index)}>
<Close size={20} paddingLeft={20}></Close>
</span>
</span>
</li>
))}
</ul>
</If>
</Col>
</div>
</Row>
<div className="save-cancel-buttons-div">
<Row>
<Col xs={3} sm={3} md={2} lg={2}>
</Col>
<Col xs={6} sm={6} md={6} lg={6}>
<Row>
<Col xs={6} sm={6} md={6} lg={6}>
<Button
value={<FormattedMessage id="saveBtn" defaultMessage="speichern" />}
fontSize={14}
minHeight={33}
minWidth={150}
backgroundColor="blue"
onClick={this.createNewDelivery}/>
</Col>
<Col xs={6} sm={6} md={6} lg={6}>
<Button
value={<FormattedMessage id="cancelBtn" defaultMessage="Zurück" />}
fontSize={14}
minHeight={33}
minWidth={150}
backgroundColor="red"
onClick={this.goBackToOfferedDeliveries}
/>
</Col>
</Row>
<Col xs={3} sm={3} md={2} lg={2}>
</Col>
<Col xs={6} sm={6} md={6} lg={6}>
</Col>
</Col>
</Row><br/>
</div>
</div>

Answer 1

Try to add a new container div for the save-cancel-buttons-div. Position the item-list and the container div relatively to their div-one parent container. Finally, position the save-cancel-buttons-div relatively to its container and add margin-left-right:auto so it centers inside it's parent div.
// div for file list
.item-list
{
position: relative; <--- this as first line of code
float:left; <--- add this so it takes a definite position
width: 16em;
margin-left: -38px;
}
// Put .save-cancel-buttons-div inside this div
.containerForSaveCancel
{
position:relative;
float:left;
width:100%;
text-align:center;
margin:0;
padding:0;
}
// div for buttons
.save-cancel-buttons-div
{
position: relative;
margin:5px auto 0 auto; <--- add this to center the div inside its parent
}