import * as React from 'react';
import { Label, Form } from 'semantic-ui-react';
const { Flex, Box } = require('reflexbox');

export class LexSingleInput extends React.Component<any, any> {
  public render() {
    return (
      <div>
        <Form>
          <Form.Group as={Flex} inline={true} style={{ margin: '0 0 5px 5px' }}>
            <Form.Field as={Box} w={2 / 5} style={{ textAlign: 'right' }}>
              <Label
                pointing="right"
              >
                {this.props.labelText}
              </Label>
            </Form.Field>
            <Form.Field as={Box} w={3 / 5} >
              {this.props.children}
            </Form.Field>
          </Form.Group>
        </Form>
      </div>
    );
  }
}
