Dropdown menu positions outside of window view

Issue

I have a Press Me button that opens a dropdown menu when pressed. My JavaScript works, but I have the following problem with CSS and HTML:

When you click Press Me the dropdown menu opens BUT it is partially not in the visible window. You have to scroll to the right to see the problem.

I tried to use right: px with some numbers but now it's not responsive at all.

// NO PROBLEM HERE IN JAVASCRIPT!
function myFunction() {
    document.getElementsByClassName('dropdown-content')[0].classList.toggle('show');
}
window.onclick = function(event) {
    if (!event.target.matches('#verify-name')) {
        var dropdowns = document.getElementsByClassName('dropdown-content');
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

.buttons {
    display: flex;
    justify-content: flex-end;
    color: red;
}
.dropdown-content {
    display: none;
    position: absolute;
    width: 120px;
        padding: 14px;
        background-color: yellow;
}
.show {
    display: flex;
}

<div class="buttons">
    <div>
        <a id="verify-name" onclick="myFunction()">Press Me</a>

        <div class="dropdown-content">
            <span>Logout</span>
        </div>
    </div>
</div>

Solution

I just remove position: absolute from .dropdown-content class and add text-align: right; to .buttons class.

// NO PROBLEM HERE IN JAVASCRIPT!
function myFunction() {
  document.getElementsByClassName('dropdown-content')[0].classList.toggle('show');
}
window.onclick = function(event) {
  if (!event.target.matches('#verify-name')) {
    var dropdowns = document.getElementsByClassName('dropdown-content');
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.buttons {
  display: flex;
  justify-content: flex-end;
  color: red;
  text-align: right;
}

.dropdown-content {
  display: none;
  direction: rtl;
  width: 120px;
  padding: 14px;
  background-color: yellow;
}

.show {
  display: flex;
}

<div class="buttons">
  <div>
    <a id="verify-name" onclick="myFunction()">Press Me</a>

    <div class="dropdown-content">
      <span>Logout</span>
    </div>
  </div>
</div>

Answered By - kian