Cannot arrange divs one below the other - css

Question

I am trying to arrange my <div>s one below the other but they still end up on the same line, I tried using row and col approach but still it's not working, Answers on SO also didn't work.
Currently my code is like this
.dragAndDropBox{
position: absolute;
width: 80%;
height: 100%;
border: 1px solid #fff;
background-color: gainsboro;
border-radius: 5px;
}
.dragAndDropBox:hover{
position: absolute;
width: 80%;
height: 100%;
border: 1px solid #fff;
background-color: gray;
border-radius: 5px;
}
.dragAndDropBox .dragAndDropUpload{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
.dragAndDropBox .dragAndDropProgressBar{
position: absolute;
bottom: 0;
margin: 0;
padding: 0;
width: 100%;
max-height: 10%;
outline: none;
}
.dragAndDropBox .dragAndDropText{
padding-top: 2%;
text-align: center;
line-height: 1rem;
color: #3b3b3b;
font-family: Arial
}
<div class="uploadBox w-100">
<div class="uploadDropBox">
<div class="dragAndDropBox">
<input
accept="image/*"
class="dragAndDropUpload"
type="file"
/>
<div class="dragAndDropText">Drag / Browse</div>
<div
bsstyle="success"
class="dragAndDropProgressBar mt-1 progress">
<div
role="progressbar"
class="progress-bar progress-bar-striped"
style="width: 0%;"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
/>
</div>
</div>
</div>
<div class="uploadedBox w-100">
<div>Filename Delete View</div>
</div>
</div>
I am using Bootstrap 4.3.1

Answer 1

The <div>s have position: absolute which puts them on top of each other.
I would suggest adding position: relative to .dragAndDropBox so all the absolutely positioned elements have a relative element to refer to.
Here's the fiddle: https://jsfiddle.net/yjdkne3b/
.dragAndDropBox {
position: relative;
width: 80%;
height: 200px;
border: 1px solid #fff;
background-color: gainsboro;
border-radius: 5px;
}
.dragAndDropBox:hover {
background-color: gray;
}
.dragAndDropBox .dragAndDropUpload {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
.dragAndDropBox .dragAndDropProgressBar {
position: absolute;
bottom: 0;
margin: 0;
padding: 0;
width: 100%;
max-height: 10%;
outline: none;
}
.dragAndDropBox .dragAndDropText {
padding-top: 2%;
text-align: center;
line-height: 1rem;
color: #3b3b3b;
}
<div class="uploadBox w-100">
<div class="uploadDropBox">
<div class="dragAndDropBox">
<input accept="image/*" class="dragAndDropUpload" type="file" />
<div class="dragAndDropText">Drag / Browse</div>
<div bsstyle="success" class="dragAndDropProgressBar mt-1 progress">
<div role="progressbar" class="progress-bar progress-bar-striped" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" />
</div>
</div>
</div>
<div class="uploadedBox w-100">
<div>Filename Delete View</div>
</div>
</div>
I hope this is the solution you are looking for.
Also, you don't have to repeat the properties from the element on hover. If only the background changes on hover it's ok to change just that and the other properties will remain the same. :)

Answer 2

Use <br> as a line break (end-of-line).

Answer 3

I think it is because of the "position: absolute" in your CSS. This makes block elements only use as much space as they need.
You can read more about this here: Does adding a position: absolute to a block element make it behave like an inline?