Three column + header layout react component

3cols.tsx

import * as React from 'react';
import styled from 'styled-components';
import { Col, Grid, Row } from 'react-styled-flexboxgrid';
import Form from 'semantic-ui-react/dist/commonjs/collections/Form/Form';
import { SubheaderCentered } from '../typography/Subheader';


/**
 * |-------------------|
 * |                   |
 * |-------------------|
 * |      |      |     |
 * |      |      |     |
 * |      |      |     |
 * |-------------------|
 */


export const RecipeEditorLayout = props => {

  const { children } = props;

  if (React.Children.count(children) !== 3) {
    throw new Error('ItemEditor3ColPage must have 3 children');
  }

  return (
    <FormStyled>
      <Row>
        <StyledCol xs={12} sm={4} md={4} lg={4}>
          <SubheaderCentered>General Info</SubheaderCentered>
          {children[0]}
        </StyledCol>
        <StyledCol xs={12} sm={6} md={6} lg={6}>
          <SubheaderCentered>Ingredients</SubheaderCentered>
          {children[1]}
        </StyledCol>
        <StyledCol xs={12} sm={2} md={2} lg={2}>
          <SubheaderCentered>Nutrients</SubheaderCentered>
          {children[2]}
        </StyledCol>
      </Row>
    </FormStyled>
  );

};

export default RecipeEditorLayout;

const StyledCol = styled(Col)`
  display: flex;
  flex-direction: column;
`;

const FormStyled = styled(Form)`
  flex: 1;
  
  & ${StyledCol} {
    
    &:not(:first-child) {
      border-left: 1px solid #e4e4e4;
    }
  }
`;