float right button without going outside parent div tailwindcss - css

Question

I am trying to float a button to the right of a card. I want it to appear in the bottom righthand corner.
When I use a float right. It appears outside the parent div, is there a way to position it correctly?
<div class="m-10">
<div>
<div class="bg-white shadow-lg border-grey w-1/3 ">
<div class="p-4 flex">
<div class="pt-3 text-center font-bold text-2xl w-16 h-16 bg-grey-lightest">
D
</div>
<div class="ml-4">
Team Name
</div>
</div>
<div class="float-right">
<a :href="'/company/' + team.id">
<button class="ml-2 bg-blue hover:bg-blue-dark text-white text-sm font-bold rounded p-2">
View
</button>
</a>
</div>
</div>
</div>
</div>
I have a running sandbox here with the code
https://codesandbox.io/s/tailwind-css-nl0ph

Answer 1

Instead of using the float-right class use text-right

Answer 2

You just need to apply float-right to the button element instead of the parent div
<div class="m-10">
<div>
<div class="bg-white shadow-lg border-gray-400 w-1/3">
<div class="p-4 flex">
<div class="pt-3 text-center font-bold text-2xl w-16 h-16 bg-gray-200">
D
</div>
<div class="ml-4">Team Name</div>
</div>
<div class="h-fit min-h-full flex justify-end">
<a href="'/company/' + team.id">
<button class="float-right ml-2 bg-blue-400 hover:bg-blue-600 text-white text-sm font-bold rounded px-2 py-1">
View
</button>
</a>
</div>
</div>
</div>
</div>

Answer 3

Add this new class to clear floating element
.clearfix::after {
content: "";
clear: both;
display: table;
}
and then apply that class to the containing div (parent div of the button)
source: https://www.w3schools.com/howto/howto_css_clearfix.asp