Can't switch right to left jQuery

I have two icons (Glyphicon) which are places like

1: Menu to the left of the screen 2: Gift to the right of the screen.

When the button is pressed Menu

, a message appears with Left to Right

. This works great. But when clicked, Gift

it appears in some weird position as shown in the image named Suraj Palwe

This to the left of the image. I want this to appear to the right of the screen to move left according to the width div

.

This is the image as it looks. JSfiddle

This is what I wrote in my code

style

.slide_birthday_click{
          margin-top: 2%;
          padding: 5px;

          background: grey;
          height: auto;
          display:none;
          position:absolute;
          z-index: 5;
          float: right;
        }

      

        
        
        
      

    

in html body

<div class="slide_birthday_click">
        <table class="table">
          <tr>
            <td>Suraj Palwe</td>
          </tr>
        </table>
    </div>
<span class="glyphicon glyphicon-gift" style="float:right;" id="today_birthdays"></span>

      

        
        
        
      

    

The Jquery Part

$("#today_birthdays").click(function(){
        $(".slide_birthday_click").toggle("slide",{direction:'right'},2000);
      });

      

        
        
        
      

    

I want this block to contain the word to the Suraj Palwe

right of the screen when it switches from right to left

.

I don't understand where I am going wrong in my code . Thanks in advance!