JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#foo {
    width: 100%
}

JavaScript

fExt.define('User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email', 'phone']
});

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [{
        name: 'Lisa',
        email: '[email protected]',
        phone: '555-111-1224'
    }, {
        name: 'Bart',
        email: '[email protected]',
        phone: '555-222-1234'
    }, {
        name: 'Homer',
        email: '[email protected]',
        phone: '555-222-1244'
    }, {
        name: 'Marge',
        email: '[email protected]',
        phone: '555-222-1254'
    }]
});

Ext.onReady(function () {
    Ext.create('Ext.panel.Panel', {
        renderTo: 'foo',
        layout: {
            type: 'table',
            columns: 2,
            tableAttrs: {
                style: {
                    width: '100%',
                    height: '100%'
                }
            },
            tdAttrs: {
                style: {
                    width: '50%'
                }
            }
        },
        defaults: {
            minHeight: 150
        },
        items: [
          Ext.create('Ext.grid.Panel', {
            store: userStore,
            height: 200,
            title: 'Application Users',
            columns: [{
                text: 'Name',
                sortable: false,
                hideable: false,
                dataIndex: 'name'
            }, {
                text: 'Email Address',
                dataIndex: 'email',
                hidden: true
            }, {
                text: 'Phone Number',
                flex: 1,
                dataIndex: 'phone'
            }]
        }), {
            html: 'Cell B content'
        }, {
            html: 'Cell C content'
        }, {
            html: 'Cell D content'
        }]
    });
});