Is it possible to position drop down menu under specific button, and not first one by default using only css?

For example, how to but drop down under forth button instead of first one (under INFO instead HOSTEL button)? I know that people usually use `<ul>` and `<li>` elements when creating drop downs, but I am interested is it possible to choose a position when using `<button>` element.

```css
.dropbtn {
    background-color: #000000;
    color: white;
    padding: 8px;
    font-size: 9px;
 width: 80px;
 margin-right: 5px;
 font-family: 'Istok Web', sans-serif;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
 float: left;
 top: 6.7%;
 margin-left: 5px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #95e5c4;
 font-family: 'Istok Web', sans-serif;
 text-align: center !important;
    font-size: 9px;
    width: 80px;
    box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
    z-index: ;
}

.dropdown-content a {
    color: black;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #e6e6e6}

.dropdown:hover .dropdown-content {
    display: block; 
}
```

```html
 <div class="dropdown">
   <button class="dropbtn">HOSTEL</button>
   <button class="dropbtn">RESERVATION</button>
   <button class="dropbtn">GALLERY</button>
   <button class="dropbtn">INFO</button>
   <div class="dropdown-content">
  <a href="#">EVENTS IN ZG</a>
   </div>
   <button class="dropbtn">FIND US</button>
 </div>
```