Set the essentials at the bottom and workspaces button near the indicator

userChrome.css

#zen-sidebar-bottom-buttons {
  display: contents !important;
  /* this part is where it kinda broke down, if you guys can help it would be appreciated */
  #preferences-button {
    display: inline;
    width: fit-content;
  }
  
  #downloads-button {
    display: inline;
    width: fit-content;
    .toolbarbutton-badge-stack {
      width: fit-content;
    }
  }
  
  #zen-workspaces-button {
    width: fit-content;
    max-width: 9em;
    right: 2em;
    position: absolute !important;
    background: transparent !important;
    justify-content: end !important;
    background: none;
    top: 4.5em;
  }
}

/* This is also turn the essentials to the bottom, you could try ofsetting using margin-top property that is set to zero here */
#zen-essentials-wrapper {
  position: absolute;
  bottom: 0;
  
  .zen-essentials-container {
    transform: translateY(-100%) !important;
  }
}

.zen-current-workspace-indicator {
  margin-top: 0 !important;
}

#zen-tabs-wrapper {
  margin-top: 0 !important;
  margin-bottom: 9em !important;
}

/* You might also want to hide the current workspace indicator, for that you can use this

#titlebar:has([zen-workspace-id="{ID HERE}"][active="true"]) 
.subviewbutton[zen-workspace-id="{ID HERE}"] {
  display: none !important;
}

However you need to fill out the id for that.

If you want animation, you can replace [active="true"] with [hidden="true"] for exit animation
*/