Is there a way to align a button and text on the bottom right in html? I am trying to create a layout where a button is at the bottom right with text next to it, similar to online stores ... Why are there 3 buttons at the top and the last one at the bottom?
.flex-middle {
display: flex;
flex-direction: row;
}
body {
background: #fff;
/* Background color */
color: #800080;
/* Text color */
}
bottombanner {
display: table;
}
.col-sm-3 {
display: table-cell;
vertical-align: middle;
}
button {
position: absolute;
right: 10px;
bottom: 10px;
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Best Products In The World!</title>
</head>
<body>
<h1 align="center">Affordable Phones</h1>
<h2 align="center">Find low-priced phones here</h2>
<hr>
<p>
<div class="flex-middle">
<img src="C:\Users\Misha\Pictures\s-l640.jpg" width="200" height="200"><a>$100</a>
<p>
<input type="button" value="Buy Now">
</p>
<img src="C:\Users\Misha\Pictures\iphone-11-pro-max-gold.jpg" width="210" height="210" alt="$500">
<a>$500</a>
<p>
<input type="button" value="Buy Now">
</p>
<img src="https://i.allo.ua/media/catalog/product/cache/1/image/524x494/602f0fa2c1f0d1ba5e241f914e856ff9/0/_/0_59_16_1_1.jpg" width="200" height="200"><a>$300</a>
<p>
<input type="button" value="Buy Now" onclick="window.location.href='https://example.com/'">
</p>
<div class="col-md-6" style="margin-top: -2%; position: inherit;">
<img style="padding: 20px;" src="https://i8.rozetka.ua/goods/21350797/copy_huawei_p_smart_2021_128gb_green_5ffd6e36c99dd_images_21350797501.png" width="150" height="210">
<span style="style=" vertical-align: 5px;"><a>$400</a> </span>
<p>
<input type="button" value="Buy Now" onclick="window.location.href='https://example.com'">
</p>
<div>