Fluidcontent - Two column FCE

TwoColumns.html

{namespace flux=FluidTYPO3\Flux\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:layout name="Content"/>

<f:section name="Configuration">
    <flux:form id="twoColConfig" options="{group: 'Layout', icon: '{f:uri.resource(path: \'Icons/ext_icon.gif\')}'}">
        <flux:grid>
            <flux:grid.row>
                <flux:grid.column name="leftCol"
                style="width: {f:if(condition: '{layout} == 0', then: '23%')}{f:if(condition: '{layout} == 1', then: '31%')}{f:if(condition: '{layout} == 2', then: '48%')}{f:if(condition: '{layout} == 3', then: '64%')}{f:if(condition: '{layout} == 4', then: '73%')}; margin-right: .5em;">
                    <flux:form.content name="leftContent" />
                </flux:grid.column>
                <flux:grid.column name="rightCol" style="width: {f:if(condition: '{layout} == 4', then: '23%')}{f:if(condition: '{layout} == 3', then: '31%')}{f:if(condition: '{layout} == 2', then: '48%')}{f:if(condition: '{layout} == 1', then: '64%')}{f:if(condition: '{layout} == 0', then: '73%')};">
                    <flux:form.content name="rightContent" />
                </flux:grid.column>
            </flux:grid.row>
        </flux:grid>
        <flux:field.select name="layout" items="{0: '25/75', 1: '33/66', 2: '50/50', 3: '66/33', 4: '75/25'}" default="0" />
    </flux:form>
</f:section>

<f:section name="Preview">
    <flux:widget.grid />
</f:section>

<f:section name="Main">
        <article class="columns" id="{record.uid}">
            <div class="left {f:if(condition: '{layout} == 0', then: 'quarter')}{f:if(condition: '{layout} == 1', then: 'onethird')}{f:if(condition: '{layout} == 2', then: 'half')}{f:if(condition: '{layout} == 3', then: 'twothirds')}{f:if(condition: '{layout} == 4', then: 'threequarters')}">
                <flux:content.render area="leftCol" />
            </div>
            <div class="right {f:if(condition: '{layout} == 4', then: 'quarter')}{f:if(condition: '{layout} == 3', then: 'onethird')}{f:if(condition: '{layout} == 2', then: 'half')}{f:if(condition: '{layout} == 1', then: 'twothirds')}{f:if(condition: '{layout} == 0', then: 'threequarters')}">
                <flux:content.render area="rightCol" />
            </div>
        </article>
</f:section>

<flux:form.content name="leftContent" />
<flux:form.content name="rightContent" />

this is not necessary i suppose