I have the text as September, That should be rotated as i want,

Now my problem is that **text should be centered as to the number**. 

If i change the text to **may** , `that should also want to be centered with that number`.

I have a screen , how i want as output 

![EXPECTED OUTPUT](https://i.stack.imgur.com/tAXj1.png)

Here is my fiddle which i tried so far. [**JSFIDDLE**](http://jsfiddle.net/2hzvqt5m/1/)

Here is my code

**HTML**

```
<div class="width35 fll">
 <div class="mgl5">
 <div class="section month fll ng-binding">september</div></div>
  <div class="section day fs80 mgrt10 mgrt13 mgr30 osb fll ng-binding">03</div>
</div>

```

**CSS**

```
.width35 {
width: 35%;
}
.fll {
float: left;
}
.mgl5 {
margin-left: 5px;
}
.month {
-webkit-transform: rotate(-90deg) translate(-129%, 50%) !important;
    font-weight: bold;
font-family: arial;
font-size: 13px;
height: 85px;
width: 20px;
color: #CDCBCB;
}
.mgrt13 {
margin-top: -13px !important;
}
.osb {
font-family: open sans bold;
}
.mgr30 {
margin-right: 30px;
}
.mgrt13 {
margin-top: -13px !important;
}
.mgrt10 {
margin-top: -10px;
}
.fs80 {
font-size: 80px;
}
.day {
width: 68px;
height: 60px;
margin-right: 10px;
font-size: 60px;
font-weight: bold;
color: #A79C9C;
margin-left: -8px;
}
.section {
padding-bottom: 7px;
}

```

Any help is Appreciated.