Help needed: Struggling to recreate vertical website 'spine' or navigation

Hey everyone

Webflow newbie here :wave: This is probably really obvious but I just can’t seem to create this vertical spine on my site.

When I add the transform: rotate (-90deg) property to the logo + subtext it just doesn’t position right.

This is the design I’m trying to achieve:

This is what I keep getting:

The two main problems are

  • The rotated text is ignoring my top/bottom padding and bleeding over the edge
  • The div is maintaining the original text width (prior to rotating it).
    I’ve tried manually setting the div width, e.g. 100px, but then text then ends up on multiple lines. Like this:

Open to any suggestions!

Thanks in advance,
Laura

mnsfld.webflow.io/play


Here is my site read-only link:
https://preview.webflow.com/preview/mnsfld?utm_medium=preview_link&utm_source=designer&utm_content=mnsfld&preview=afecde1644cc0d35bf1562122d203c00&pageId=5fbe6dd12aa38377c4b51d19&mode=preview