90 degree rotated label seem to be layed out with its width and height swapped

[Fredemus]

90 degree rotated label seem to be layed out with its width and height swapped

[geom3trik]

I think the behaviour is correct, the bit that's confusing things (I think) is that the transform happens relative to the centre of the label. I think to get what you want you could shift the label (before transform) so that it's left edge is centered (left: 50%), and then set the transform origin to the center of the left side (transform-origin: center left). Then after rotation it would place the label 10px + half the height of the label from the bottom:

Some tweaking on the bottom property might be needed to place it where you want.

The css looks like this (based on your example):

.module-sidebar-title {
  top: 1s;
  width: auto;
  height: 20px;
  overflow: visible;
  bottom: 10px;
  border-width: 1px;
  border-color: red;
  z-index: 200;
  /* child-right: 1s; */
  rotate: -90deg;
  transform-origin: center left;
  left: 50%;
  color: #ffffff;
}

[Fredemus]

Ah, I think that makes sense. I was thinking that the label gets built and drawn and then the bottom: 10px is done to the result of that, i.e. the bottom of the red borders around the label is placed 10 pixels from the bottom of the Vstack.