how to display dropdown split button content list on both side of button above and below

Question

I have split button drop down designed and it is working but dropdown list is starting from the button vertically. I also want vertical drop down list content but drop down button should be center of the list, I mean both side (above and below) of the button.

Basically in below image drop down content list should be on both side (above and below) of "2X TSL" button. It is ok if button gets hidden under drop down content list.

HTML:

<div class="dropdown"  style="width: 15px; ">
   <button class="btn1 trailSlArrowButton" style="border-left:1px solid #0d8bf2; height: 27px;">
         <i class="fa fa-caret-down arrowIcon"></i>
   </button>
   <div class="dropdown-content">
     <a value=10 >10%</a>
     <a value=15 >15%</a>
     <a value=20 >20%</a>
     <a value=25 >25%</a>
     <a value=50 >50%</a>
     <a value=70 >70%</a>
     <a value=80 >80%</a>
     <a value=100 >100%</a>
     <a value=200 >200%</a>
   </div>
</div>

CSS:

  .trailSlArrowButton {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 60px;
    z-index: 1;
    padding: 3px;
  }
  
  .dropdown-content a {
    color: black;
    padding: 1px 2px;
    text-decoration: none;
    display: block;
    cursor: pointer;
  }
  
  .dropdown-content a:hover {
    background-color: #2196F3;
    border-radius: 12px;
    transform: scale(1.3);
   }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  .dropdown:hover {
    background-color: #0b7dda;
  }

Answer 1

Translate the list up by -50% - half button height:

body {
  padding: 40vmin;
}

:root {
  --button-height: 27px;
}

.btn1 {
  border-left:1px; 
  solid #0d8bf2; 
  height: var(--button-height);
}

.trailSlArrowButton {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 60px;
  z-index: 1;
  padding: 3px;
  
  translate: 0 calc(-50% - var(--button-height) / 2);
}

.dropdown-content a {
  color: black;
  padding: 1px 2px;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.dropdown-content a:hover {
  background-color: #2196F3;
  border-radius: 12px;
  transform: scale(1.3);
}

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

.dropdown:hover {
  background-color: #0b7dda;
}

<div class="dropdown" style="width: 15px; ">
  <button class="btn1 trailSlArrowButton">
         <i class="fa fa-caret-down arrowIcon"></i>
   </button>
  <div class="dropdown-content">
    <a value=10 >10%</a>
    <a value=15 >15%</a>
    <a value=20 >20%</a>
    <a value=25 >25%</a>
    <a value=50 >50%</a>
    <a value=70 >70%</a>
    <a value=80 >80%</a>
    <a value=100 >100%</a>
    <a value=200 >200%</a>
  </div>
</div>