How to align rotated text on the side of a card?

November 22, 2024

I’m trying to create a playing card with a piece of rotated text on the side, but I’m having a hard time figuring out the CSS necessary to align the rotated text correctly.

This is how I would like the text to be aligned:

But in my current code snippet, I can’t get the text to behave like that. I’ve tried changing the transform-origin, text-align, and top, left, and right properties in hopes of getting it to align, but I still can’t figure it out. Any help would be greatly appreciated.

.group {
  display: flex;
  gap: 0.5rem;
}

.card {
  aspect-ratio: 0.675;
  width: 10rem;
  height: auto;
  border: 1px solid grey;
  border-radius: 6px;
  margin: 0.5rem;
  padding: 0.5rem;
}

.inner-div {
  display: flex;
  height: 100%;
}

.relative {
  position: relative;
}

.rotated-text {
  transform: rotate(-90deg);
  white-space: nowrap;
  position: absolute;
  margin: 0;
}

.red-card {
  flex-grow: 1;
  background: red;
  border-radius: 6px;
  margin-left: 1.5rem;
}

<div class='group'>
  <div class="card">
    <div class="inner-div">
      <div class="relative">
        <p class='rotated-text'>Text</p>
      </div>
      <div class='red-card'>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="inner-div">
      <div class="relative">
        <p class='rotated-text'>Another piece of text</p>
      </div>
      <div class='red-card'>
      </div>
    </div>
  </div>
</div>

>Solution :

Use

transform: translate(-100%) rotate(-90deg);
transform-origin: right top;

.group {
  display: flex;
  gap: 0.5rem;
}

.card {
  aspect-ratio: 0.675;
  width: 10rem;
  height: auto;
  border: 1px solid grey;
  border-radius: 6px;
  margin: 0.5rem;
  padding: 0.5rem;
}

.inner-div {
  display: flex;
  height: 100%;
}

.relative {
  position: relative;
}

.rotated-text {
  white-space: nowrap;
  position: absolute;
  margin: 0;
  transform: translate(-100%) rotate(-90deg);
  transform-origin: right top;
}

.red-card {
  flex-grow: 1;
  background: red;
  border-radius: 6px;
  margin-left: 1.5rem;
}

<div class='group'>
  <div class="card">
    <div class="inner-div">
      <div class="relative">
        <p class='rotated-text'>Text</p>
      </div>
      <div class='red-card'>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="inner-div">
      <div class="relative">
        <p class='rotated-text'>Another piece of text</p>
      </div>
      <div class='red-card'>
      </div>
    </div>
  </div>
</div>