expandable buttons on hover aligned to the right side of screen, how to keep the not hovered buttons aligned right?

I have a working code, which expands the buttons on a map when user hover over. My problem is when user hover over a button on the right side it moves all the other buttons as well. I am not sure what am I missing. Here you can see the issue:
https://jsfiddle.net/qjwtum3c/2/

    .extendable-button-container-right {
      position: absolute;
      top: 20px; /* Adjust top position */
      right: 20px;
      z-index: 1000;
    }


    .extendable-button-right {
      background-color: #0d6efd;
      color: white;
      padding: 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); /* Add shadow effect */
      flex-direction: row-reverse;
   
    }

    .extendable-button-right i {
      color: white; /* Change icon color to white */
      transition: all 0.3s ease;
    }

    .extendable-button-right:hover,
    .extendable-button-right:focus {
      background-color: #0d6efd;
    }

    .extendable-button-right:active {
      background-color: #0daafd;
    }

    .hint-right {
      display: none;
      font-size: 14px;
      color: white; /* Change hint text color to white */
      margin-right: 5px;
      transition: all 0.3s ease;
      text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
      padding-right: 5px
    }

    .extendable-button-right:hover .hint-right,
    .extendable-button-right:focus .hint-right {
      display: block;
    }

    .extendable-button-right:hover i,
    .extendable-button-right:focus i {
      transform: scale(1.2);
    }

>Solution :

Since the items are on the right side, I changed the direction to direction:rtl.

.extendable-button-container-right {
      position: absolute;
      top: 20px; /* Adjust top position */
      right: 20px;
      z-index: 1000;
      direction: rtl;
    }