demo.css

.layout {
    border: 1px solid yellow;
    padding: 10px;
}

.section {
    width: 95%;
}

.section .columns {
    display: flex;
    flex-direction: row;

    margin-bottom: 10px;
}

.section .columns .column {
    display: flex;
    flex-direction: column;
}

.column label {
    width: 100px;
    margin-right: 10px;
}

.column input {
    padding: 5px;
    margin-right: 5px;
    width: 100%;
    flex: 1;
}

.columns button {
    padding: 5px;
}

FormWithLayoutDemo.js

import React from 'react';
import FormWithLayout from 'react-form-with-layout';
import {formInputsSerialize} from 'form-input-serialize';

const Form = (props) => {
    const layout = (builder) => {
        const {layout, section} = builder;
        const col = (type, ...children) => builder.col(`col-${type}`, ...children);

        return layout(
            section('Section 1: Basic Information',
                [col(6, 'first_name', 'last_name')], // first row: two 6 cols
            ),
            section('Section 2: Contact Details',
                [col(5, 'email', 'id_no'), col(2, 'age')], // second row: two 5 cols, one 2 cols
                <button>Submit</button>
            )
        );
    }

    const fieldProps = (name) => {
        return {
            first_name: { type: 'text', required: true },
            last_name: { type: 'text', require: true },
            email: { type: 'email', required: true },
            id_no: { type: 'text' },
            age: { type: 'number' }
        }[name];
    }

    const renderField = (name, props) => {
        return (
        <div>
            <label name={props.name}>{props.name}</label>
            <input type={props.type} name={props.name} defaultValue={props.defaultValue} required={props.required}/>
        </div>);
    }

    var form = null;
    const submit = function (event) {
        if(event) event.preventDefault();

        const values = formInputsSerialize(this);
        props.onSubmit(values);
    };

    let formProps = {
        renderLayout: layout,
        getFieldProps: fieldProps,
        renderField: renderField,
        defaultValues: props.values,
        onSubmit: submit
    };

    return <FormWithLayout ref={c => form = c} {...formProps} />;
};

class FormContainer extends React.Component {
    constructor (props) {
        super(props);
        this.onSubmit = this.onSubmit.bind(this);
        this.state = {values: null};
    }

    render () {
        const values = this.state.values
            && JSON.stringify(this.state.values);

        return <div>
            <Form onSubmit={this.onSubmit} values={this.state.values}/>
            <h3>Submitted values:</h3>
            <code>{values || 'Nothing'}</code>
        </div>;
    }

    onSubmit (values) {
        console.log(values);
        this.setState({values});
    }
}

const FormWithLayoutDemo = (props) => {
    return (
        <div>
            <h1>FormWithLayout Demo</h1>
            <h2>Example:</h2>
            <FormContainer />
        </div>);
};
export default FormWithLayoutDemo;