improve date picker layout

client/src/components/DateRangePicker/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import moment from 'moment';
 
-import { Form, Message } from 'semantic-ui-react';
+import { Form, Message, Grid } from 'semantic-ui-react';
 
 import { defaultDateFormat } from '../../constants/constants';
 
@@ -81,31 +81,45 @@ class DateRangePicker extends Component {
 
         return (
             <Form>
-                <Form.Group widths="equal">
+                <Grid columns="equal">
+                    <Grid.Row>
+                        <Grid.Column>
+                            <label>{startDateLabel}</label>
                             <Form.Input
                                 fluid
                                 required
-                        label={startDateLabel}
                                 type="date"
                                 value={startDateValue}
                                 onChange={this.onStartDateChange.bind(this)}
                             />
+                        </Grid.Column>
+                        <Grid.Column>
+                            <label>{endDateLabel}</label>
                             <Form.Input
                                 fluid
                                 required
-                        label={endDateLabel}
                                 type="date"
                                 value={endDateValue}
                                 onChange={this.onEndDateChange.bind(this)}
                             />
-                </Form.Group>
+                        </Grid.Column>
+                    </Grid.Row>
                     { error &&
+                        <Grid.Row>
+                            <Grid.Column>
                                 <Message color="orange" onDismiss={this.onDismiss.bind(this)}>
                                     <Message.Header>Wrong date</Message.Header>
                                     <p><b>{startDateLabel}</b> has to be before <b>{endDateLabel}</b></p>
                                 </Message>
+                            </Grid.Column>
+                        </Grid.Row>
                     }
+                    <Grid.Row>
+                        <Grid.Column>
                             <Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
+                        </Grid.Column>
+                    </Grid.Row>
+                </Grid>
             </Form>
         );
     }