Centered vertical text using flexbox

content.haml

.container
  .header-container
    .header
      .text Prepress
    
  .cell
    %p Content 1
    %p There is more content that goes here
    %p look at all the content
  .cell
    %p Content 2
  .cell.doublewide
    %p Content 3
.container
  .header-container
    .header
      .text Press
  .cell
    %p Content 1
    %p There is more content that goes here
    %p so much more content
  .cell
    %p Content 2
  .cell.doublewide
    %p Content 3
  
.container
  .header-container
    .header
      .text Finishing
  .cell
    %p Content 1
    %p There is more content that goes here
  .cell
    %p Content 2
  .cell.doublewide
    %p Content 3

styles.sass

.cell
  background-color: #eee
  padding: 5px
  flex: 1
  &.doublewide
    flex: 2
 
.container 
  display: flex
  margin: 3px

.header-container
  display: flex
  flex-direction: column
  justify-content: center
  background-color: #ccc
    
.header
  overflow: hidden
  width: 1.5em
  line-height: 1.5
  text-align: center
  
  .text
    display: inline-block
    white-space: nowrap
    transform: translate(0,100%) rotate(-90deg) 
    transform-origin: 0 0
      
    &:before
      float: left
      content: ""
      margin-top: 100%