Align 90deg rotated div with parents edge/border-box

Is there away to achieve this or is it just a limitation of CSS at the moment and the unconventional layout I'm trying to create?

As you can see in the example, it's almost there but the edge of the rotated text overlaps into the parent containers padding.

The width of the rotated div will change, so I can't set a pixel value to offset it. The only other solution I can think of is to use position: absolute, which isn't ideal for what I'm going to do next with the layout ...but that might be the only option?

/* Body */
body {
  background: white;
  margin: 0;
  padding: 0;
}

/* Header */
.page-head {
  border-right: 2px solid black;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: end;
  height: 100vh;
  height: -webkit-fill-available;
  height: -moz-available;
  height: stretch;
  padding: 24px 0;
  position: fixed;
  top: 0;
  left: 0;
  transition: height 0.12s ease-out, top 0.12s ease-out, width 0.12s ease-out;
  width: 48px;
}

/* Logo */
.site-logo {
  background: rgba(255, 0, 0, 0.24);
  display: flex;
  flex-shrink: 0;
  height: 32px;
  stroke: black;
  width: 32px;
}

/* Toggle */
.contrast {
  background: rgba(255, 0, 0, 0.24);
  display: flex;
  justify-self: end;
  align-self: normal;
  margin: auto 0 0;
  padding: 0;
  transform: rotate(-90deg);
  transform-origin: center;
}

/* Data & Time */
.os-menu {
  background: rgba(255, 0, 0, 0.24);
  box-sizing: border-box;
  display: flex;
  justify-self: end;
  align-self: normal;
  padding: 0;
  transform: rotate(-90deg);
  transform-origin: center;
}

<div class="page-head" role="banner">

  <a class=" site-logo" href="index.html">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" height="32" width="32">
      <defs>
        <clipPath id="a">
          <circle cx="32" cy="32" r="31" fill="none" />
        </clipPath>
      </defs>
      <circle cx="32" cy="32" r="31" fill="none" stroke-miterlimit="10" stroke-width="2" vector-effect="non-scaling-stroke" />
      <g clip-path="url(#a)" fill="none" stroke-miterlimit="10" stroke-width="2">
        <path d="M16.19 58.57V5.43L31.94 32 47.69 5.43v53.14M31.94 32v31.49" vector-effect="non-scaling-stroke" />
      </g>
    </svg>
  </a>

<!--   <div class="os-menu">
    <div id="date" class="os-menu__item">Date</div>
    <div id="time" class="os-menu__item">Time</div>
  </div> -->

  <p class="contrast"><a href="#" class="contrast__link"><span class="contrast__label">Mode</span><span class="contrast__switch"></span></a></p>

</div>

Solution

Try this:

I've updated the transform and transform-origin values in .contrast class. and in the .page-header class I've changes justify-item: end to justify-content: space-beetween

/* Body */

body {
  background: white;
  margin: 0;
  padding: 0;
}


/* Header */

.page-head {
  border-right: 2px solid black;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  height: -webkit-fill-available;
  height: -moz-available;
  height: stretch;
  padding: 24px 0;
  position: fixed;
  top: 0;
  left: 0;
  transition: height 0.12s ease-out, top 0.12s ease-out, width 0.12s ease-out;
  width: 48px;
}


/* Logo */

.site-logo {
  background: rgba(255, 0, 0, 0.24);
  display: flex;
  flex-shrink: 0;
  height: 32px;
  stroke: black;
  width: 32px;
}


/* Toggle */

.contrast {
  background: rgba(255, 0, 0, 0.24);
  margin: 0;
  padding: 0;
  transform: rotate(-90deg) translate(0, -50%);
  transform-origin: top center;
}


/* Data & Time */

.os-menu {
  background: rgba(255, 0, 0, 0.24);
  box-sizing: border-box;
  display: flex;
  justify-self: end;
  align-self: normal;
  padding: 0;
  transform: rotate(-90deg);
  transform-origin: center;
}

<div class="page-head" role="banner">

  <a class=" site-logo" href="index.html">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" height="32" width="32">
      <defs>
        <clipPath id="a">
          <circle cx="32" cy="32" r="31" fill="none" />
        </clipPath>
      </defs>
      <circle cx="32" cy="32" r="31" fill="none" stroke-miterlimit="10" stroke-width="2" vector-effect="non-scaling-stroke" />
      <g clip-path="url(#a)" fill="none" stroke-miterlimit="10" stroke-width="2">
        <path d="M16.19 58.57V5.43L31.94 32 47.69 5.43v53.14M31.94 32v31.49" vector-effect="non-scaling-stroke" />
      </g>
    </svg>
  </a>

  <!--   <div class="os-menu">
    <div id="date" class="os-menu__item">Date</div>
    <div id="time" class="os-menu__item">Time</div>
  </div> -->

  <p class="contrast"><a href="#" class="contrast__link"><span class="contrast__label">Mode</span><span class="contrast__switch"></span></a></p>

</div>