I'm trying to make a vertical "badge" aligned to the left / right edges of the browser. My current approach is to make a div and rotate it 90 degrees, then use `position: fixed; left: 0; top: 20%` to place it properly, however I've ran into the following problem: 

As the text grows longer, the widget becomes "detached" from the left and right edges of the browser.

**Demo**: <http://jsfiddle.net/bv3no599/> (See how the badges deviate further with longer text)

**Current Code**:

```
<div id="badge-outer-2" style="background: #1508bc;color:#FFFFFF;position: fixed;border-top-right-radius: 5px; border-top-left-radius: 5px;transform:rotate(90deg);top: 50%;padding:8px;font-size:13px;box-shadow:0px 0px 4px rgba(0,0,0,0.4);z-index:99996;cursor:pointer; left: -50px">Not OK when the text is longer and longer</div>

```

Could anyone point me to a solution to this problem? Why does it move farther from the edge after increasing the text length? 

Thanks.