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-default-vertical .x-panel-header-text-container {
/*	-webkit-transform: rotate(-90deg);
	-webkit-transform-origin: 0 0;
	-moz-transform: rotate(-90deg);
	-moz-transform-origin: 0 0;
	-o-transform: rotate(-90deg);
	-o-transform-origin: 0 0;
	transform: rotate(-90deg);
	transform-origin: 0 0;
	display: block;
	position: absolute !important;
	top: 85px !important;
	left: 0px !important;*/
}

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()
});