Fix 2 divs to left edge of screen with CSS - html

Question

Can someone explain why my purple box overlaps my yellow box in this demo?
I'd like my yellow box to appear first & then my purple box to be 10px below it.
Demo: http://jsfiddle.net/t0x0y7ax/
#container {
position: fixed;
top: 50%;
left:-55px;
}
#feedback1 {
background:yellow;
height: 50px;
width: 160px;
margin-bottom:10px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback2 {
background:purple;
height: 50px;
width: 160px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<div id="container">
<div id="feedback1">Feedback</div>
<div id="feedback2">Feedback</div>
</div>

Answer 1

Personally, I would just transform the container...it makes it much easier all round
JSfiddle Demo
* {
margin: 0;
padding: 0;
}
#container {
position: fixed;
top:50%;
left:0;
border:1px solid red;
transform-origin:top left;
transform: rotate(-90deg) translate(-100%, 0%);
}
#feedback1 {
background:yellow;
height: 50px;
width: 160px;
float: right; /* to correct order when rotated */
}
#feedback2 {
background:purple;
height: 50px;
width: 160px;
float: right; /* to correct order when rotated */
}
<div id="container">
<div id="feedback1">Feedback</div>
<div id="feedback2">Feedback</div>
</div>

Answer 2

It is because of the rotation as the commentator specified. You can float them to get them to show up next to each other - http://jsfiddle.net/t0x0y7ax/2/.
#container {
position: fixed;
top: 50%;
left:-55px;
}
#feedback1 {
float: left;
background:yellow;
height: 50px;
width: 160px;
margin-bottom:10px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback2 {
float: left;
background:purple;
height: 50px;
width: 160px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Updated Fiddle - http://jsfiddle.net/t0x0y7ax/12/