title: float right button without going outside parent div tailwindcss
body: <p>I am trying to float a button to the right of a card. I want it to appear in the bottom righthand corner.</p>
  
  <p>When I use a float right. It appears outside the parent div, is there a way to position it correctly?</p>
  
  <pre><code>&lt;div class="m-10"&gt;
      &lt;div&gt;
          &lt;div class="bg-white shadow-lg border-grey w-1/3 "&gt;
              &lt;div class="p-4 flex"&gt;
                  &lt;div class="pt-3 text-center font-bold text-2xl w-16  h-16 bg-grey-lightest"&gt;
                      D
                  &lt;/div&gt;
                  &lt;div class="ml-4"&gt;
                      Team Name
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="float-right"&gt;
                  &lt;a :href="'/company/' + team.id"&gt;
                      &lt;button class="ml-2 bg-blue hover:bg-blue-dark text-white text-sm font-bold rounded p-2"&gt;
                          View
                      &lt;/button&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/q0EPM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q0EPM.png" alt="enter image description here"></a></p>
  
  <p>I have a running sandbox here with the code</p>
  
  <p><a href="https://codesandbox.io/s/tailwind-css-nl0ph" rel="nofollow noreferrer">https://codesandbox.io/s/tailwind-css-nl0ph</a></p>