div.row
  h1.writing-mode Writing mode
  h1.transform Transform rotate
  
View Compiled
h1 {
  font-family: Roboto, sans-serif;
  transition: 1s ease-out;
  line-height: 1;
  margin: 0;
  border-left: 3px hotpink solid;
  width: max-content;
  margin-top: 40px;
  &.clicked {
    padding-left: 30px;
  }
}

.row {
  display: flex;
}

.writing-mode {
  writing-mode: initial;
  &.clicked {
   writing-mode: vertical-lr;  
  }  
}
.transform {
  transform: rotate(0);
  transform-origin: center;
  &.clicked {
    transform: rotate(90deg);
  }  
}
View Compiled
let headings = document.querySelectorAll('h1');

headings.forEach(function(heading) {
  heading.addEventListener('click', () => {
    heading.classList.toggle('clicked');
  });
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.