I have a 'right-float' classed div placed inside a 'w-100' classed div. Inside the right-floated div I want to display at the top a button with 3 points inside (...) and at the bottom another Icon (see images below). So I added 'h-100' class to the float-right div and created two divs inside it: the first one with the ... button inside and the second one with 'align-bottom' class.
Problem
the second div does not stay at the bottom, I think because h-100 is not working as expected
Observed behaviour
Expected behaviour
HTML Tree
Example snippet
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="clearfix w-100 border border-primary">
<div class="float-right h-100">
<div class="clearfix">
<div class="float-right">
<button class="btn btn-sm btn-primary">...</button>
</div>
</div>
<div class="align-bottom clearfix">
<div class="float-right">
<button class="btn btn-sm btn-primary">BTN2</button>
</div>
</div>
</div>
<div>
<div>FOO</div>
<div>FOO2</div>
<div>FOO3</div>
</div>
</div>
</body>
</html>