JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all-debug.css">

CSS

.x-panel-header-body-default-collapsed-left span.x-header-text{
   transform:rotate(180deg);
   position:relative;
   bottom:0;
   text-align:right;
   display:block;
   margin-left: 4px;
   background-color:'green';
}

JavaScript

var filterPanel = Ext.create('Ext.panel.Panel', {
    bodyPadding: 5,  // Don't want content to crunch against the borders
    width: 300,
    title: 'Filters',
    collapsible: true,
    collapseDirection: 'left',
    items: [{
        xtype: 'datefield',
        fieldLabel: 'Start date'
    }, {
        xtype: 'datefield',
        fieldLabel: 'End date'
    }],
    renderTo: Ext.getBody()
});