component-details.jsx

...
render() : JSX.Element {
		const { isLoading, className, children, actions = [], filters = []} = this.props;
		const classNames = ['panel-element', className].filter(Boolean).join(' ');
		return (
			<ReflexElement className={classNames} >				
				<div className="panel-body">
					{isLoading && <Loader active inline /> }
					{!isLoading && children }
				</div>
			</ReflexElement>
		);
	}
...

component-list.jsx

...
render() : JSX.Element {
		const { isLoading, className, children, actions = [], filters = []} = this.props;
		const classNames = ['panel-element', className].filter(Boolean).join(' ');
		const filtersBar = !filters.length ? null :
			<div className="panel-toolbar_filters">
				{ this.getFilterElement(filters) }
			</div>;
		const actionsBar = !actions.length ? null :
			<div className="panel-toolbar_actions">
				{ actions.map(({id, ...props}, index) => <Button key={id || index} {...props} />) }
			</div>;

		return (
			<ReflexElement className={classNames} >
				{ (filtersBar || actionsBar) &&
					<div className="panel-toolbar">
						{ filtersBar }
						{ actionsBar }
					</div>
				}
				<div className="panel-body">
					{isLoading && <Loader active inline /> }
					{!isLoading && children }
				</div>
			</ReflexElement>
		);
	}
...

master-container.jsx

export default class Container extends React.Component<Props> {
	constructor (props: Props) {
		super(props);
	}

	static defaultProps = {
		orientation: 'vertical',
	};

	render() : JSX.Element {
		const { className, children, ...rest} = this.props;
		const classNames = ['panel', className].filter(Boolean).join(' ');

		return (
			<ReflexContainer className={classNames} {...rest} >
				{ children }
			</ReflexContainer>
		);
	}
}

page.jsx

...
render(): JSX.Element {
		return (
			<Panel.Container>
				<Component.List
					models={models}
					isLoading={isLoading}
					checkedModels={checkedModels}
					selectedModel={selectedModel}
					onCheck={Actions.toggleCheck}
					onGet={Actions.get}
					onCreate={() => this.handleAction(new Country(true), 'new')}
					onDelete={() => Actions.remove(checkedModels)}
					onSelect={(item) => this.handleAction(item)}
				/>

				<Panel.Splitter propagate={true}/>

				<Component.Details
					model={selectedModel}
					isLoading={isLoading}
					onEdit={() => this.handleAction(selectedModel, 'edit')}
				/>
			</Panel.Container>
		);
	}
...

styles.scss

.panel {
	display: flex;

	.panel-element {
		>div {
			display: flex;
			flex: 1;
			flex-direction: column;
		}

		.panel-toolbar {
			display: flex;
			height: 2.75rem;
			align-items: center;
			border-bottom: 1px solid $lighter-grey;
			background-color: var(--themeColorLightest);
			padding: 0 0.5em;
			text-align: right;

			.panel-toolbar_filters {
				display: flex;
				flex: 1;
				justify-content: flex-start;

				input {
					outline: none;
					padding: 0.5em;
				}
			}

			.panel-toolbar_actions {
				display: flex;
				flex: 1;
				justify-content: flex-end;
			}
		}

		.panel-body {
			flex: 1;
			overflow-y: auto;
		}
	}

	.panel-list {
		.panel-list-item {
			display: flex;
			padding: 0.5em;
			padding-left: 1em;
			border-bottom: 1px solid $lighter-grey;
			cursor: pointer;

			&:hover {
				background-color: $lighter-grey;
			}

			.panel-list-item-checkbox {
				display: flex;
				padding-right: 1em;
				flex-grow: 0 !important;
				align-items: center;
				justify-content: center;
			}

			&.list-item-selected {
				transition: background-color 0.125s;
				background-color: var(--themeColorMedium);
				color: $white;
			}
		}
	}
}