How to Split a content area into two parts??

Hello Experts,

I am using Two combo boxes and two Charts in My SAP Fiori APP

and now i want to split Combo boxes in Left side and Charts are in Right Side

so i used the splitter layout, but its throwing an Error for me   Can any one Suggest me how to split

Here is my View code

<core:View controllerName="demovizframe.V_chart" xmlns:core="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml"

  xmlns:mvc="sap.ui.core.mvc" xmlns:viz="sap.viz.ui5.controls" xmlns:l="sap.ui.commons.layout" xmlns="sap.m" class="sapUiSmallMargin">

  <App>

  <Page title="COMPARATIVE ANALYSIS">

  <content>

<l:VerticalLayout>

<l:content>

  <Label text="QUARTER:" class="LabelStyle"/>

  <ComboBox id="idCombo" placeholder="Select Your Quarter" items="{OdataModel>/COMPARITIVE_ANALYSIS2}" selectionChange="onChange">

  <core:Item text="{OdataModel>QUAR}" />

  </ComboBox>

  <Label text="MONTH:" class="LabelStyle"/>

  <ComboBox id="oComboBox" selectionChange="onSelect"></ComboBox>

  </l:content>

  </l:VerticalLayout>

  <Label text="" class="LabelStyle"/>

  <ScrollContainer focusable="true" height="100%" horizontal="false" vertical="true" width="100%">

  <viz:VizFrame height="900px" id="idcolumn" uiConfig="{applicationSet:'fiori'}" vizType="column" width="100%"></viz:VizFrame>

  </ScrollContainer>

  <ScrollContainer focusable="true" height="100%" horizontal="false" vertical="true" width="100%">

  <viz:VizFrame height="900px" id="idcolumn1" uiConfig="{applicationSet:'fiori'}" vizType="line" width="100%"></viz:VizFrame>

  </ScrollContainer>

  <ScrollContainer focusable="true" height="100%" horizontal="false" vertical="true" width="100%">

  <viz:VizFrame height="700px" id="idcolumn2" uiConfig="{applicationSet:'fiori'}" vizType="stacked_column" width="100%"></viz:VizFrame>

  </ScrollContainer>

  </content>

  </Page>

  </App>

  </core:View>

Thanks in Advance,

Bharath