Vertical Button using CSS

Question

I'm trying to build a vertical button but I not able to put the text in only one line.

Until now I have:

Any idea how can I push down the text and put it in only one line?

#hp-ctn-howItWorks
{
    position:fixed;
    top:50px;
    right: 0px;
    padding:0px;
    margin:0px;
    width: 40px;
    height:160px;
    background:#FF931E;
    z-index:15;
    border-radius: 3px 0px 0px 3px;
}

#hp-ctn-howItWorks img
{
    margin: 15px 0px 0px 13px;
}

#hp-ctn-howItWorks p
{
    color: #fff;
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
}

<div id="hp-ctn-howItWorks">
    <img src="~/Content/images/ui-symb-arrow-left-white-15x15.png" width="15" height="15" />
    <p>Como funciona</p>
</div>

Answer 1

demo - http://jsfiddle.net/victor_007/m1c5xazr/1/

rotate the buttom instead of text

#hp-ctn-howItWorks img {
    vertical-align:middle;
}
#hp-ctn-howItWorks {
    padding:0px 0px 0px 0px;
    text-align: center;
    margin:0px;
    width: 160px;
    height:40px;
    background:#FF931E;
    z-index:15;
    border-radius: 5px 5px 0px 0px;
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    transform-origin: bottom right;
    position: fixed;
    right: 0px;
}
#hp-ctn-howItWorks p {
    color:#fff;
    display:inline-block;
    line-height:40px;
}