aligning rotated buttons easily

I have 5 buttons that I'm rotating. What's the best way to align them so that they're not overlapping, and so I can easily adjust the height/width when needed? The buttons need to run vertically. The starting point is the upper left corner of where the otherwise unrotated first button would have started.

It currently looks like this:

http://jsfiddle.net/JasonJSFiddle/3ypja9om/

Here's what I'm doing to rotate

button.rotate {
  width: 100px;
  height: 40px;
  -webkit-transform: translateY(-100%) rotate(-90deg); /* Safari */
  -moz-transform: translateY(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
  -ms-transform: translateY(-100%) rotate(-90deg); /* IE9 */
  -o-transform: translateY(-100%) rotate(-90deg); /* Opera */
  transform: translateY(-100%) rotate(-90deg); /* W3C */
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
}

put them all in one div, the float them left or right depending on what you want to achieve

*{box-sizing:boder-box;padding:0; margin:0;}
body{position:relative;width:100vw;height:100vh}
.rotate {
    position: absolute;
    top: 0;
    left: 38px;
    height: 40px;
    background: red;
    transform: rotate(90deg);
    transform-origin: left top;
    padding:10px;
}
.rotate button{
    display:inline;
    float: left;
}
div:not([class=rotate]){
    padding-left: 40px;
}

<div><button>button 1</button></div>
<div><button>button 2</button></div>
<div><button>button 3</button></div>
<div><button>button 4</button></div>
<div><button>button 5</button></div>

<div class="rotate">
    <button>button 1</button>
    <button>button 2</button>
    <button>button 3</button>
    <button>button 4</button>
    <button>button 5</button>
</div>