How do I get one div on top of my other div? - html

Question

I'm trying to get the div with the product name amount price and total to the top of the div it's nestled in, but changing the position isn't working. Stuff like vertical alignment didn't work for me either. I made a screenshot of the page, the buttons are in the right place, it's just the sort of table that has to move to the top of the screen. This has to contain all kinds of products later on.
this is the html:
<div class="checkout">
<div class="container-fluid" style="position: absolute; bottom: 0;">
<!-- Added products overview-->
<div class="checkoutTable">
<div class="row">
<div class="col-4">Product Name</div>
<div class="col-2">Amount</div>
<div class="col-3">Price</div>
<div class="col-3 ">Total</div>
</div>
<hr style="background-color:white;">
<div class="row">
<div class="col-4">Product Name</div>
<div class="col-2">Amount</div>
<div class="col-3">Price</div>
<div class="col-3 ">Total</div>
</div>
</div>
<!-- -->
<!-- Buttons -->
<div class="row">
<a class="checkoutBtn" href="">
<div class="col-12 checkoutBtn">
<i class="fa fa-shopping-cart"></i> Checkout
</div>
</a>
</div>
<div class="row">
<a class="addDiscountBtn" href="#">
<div class="col-6-xs addDiscountBtn">
% Add Discount
</div>
</a>
<a class="cancelBtn" href="#">
<div class="col-6-xs cancelBtn">
<i class="fa fa-ban"></i> Cancel
</div>
</a>
</div>
</div>
</div>
This is the css:
.checkout{
background-color: #22303e;
height: calc(100vh - 50px);
color: white;
font-size: 13px;
}
.checkoutBtn{
background-color: #0090e3; height: 50px;
text-align: center;
line-height: 50px
}
.addDiscountBtn{
background-color:#f8ac59; height: 50px;
text-align: center;
line-height: 50px
}
.cancelBtn{
background-color: #ed5565; height: 50px;
text-align: center;
line-height: 50px
}
a.checkoutBtn{
width: 100%;
color: white;
}
a.addDiscountBtn{
width: 50%;
color: white;
}
a.cancelBtn{
width: 50%;
color: white;
}
a:hover{
text-decoration: none;
opacity: 0.9;
}
.checkoutTable{
vertical-align:top;
}

Answer 1

For container-fluid, do not use any inline styling like you are using style="position: absolute; bottom: 0;"
Example
<div class="checkout">
<div class="container-fluid"></div>

Answer 2

You are placing your div
<div class="checkoutTable">
in parent div
<div class="container-fluid" style="position: absolute; bottom: 0;">
And here the style= "bottom: 0;" that is making everything in it to go at the bottom of the page.
<div class="checkoutTable">
<!--content-->
</div>
<div class="container-fluid" style="position: absolute; bottom: 0;">
<!--content-->
</div>

Answer 3

there is more than one solution for this issue
you can add position like
.Class {
position : absolute;
top : 0;
}
.Class {
position :fixed;
top : 0;
}