0

Here is the code:

<Grid
  container
  justify="space-between"
  alignItems="flex-start"
  direction="column"
  xs
  spacing={5}
  style={{
    padding: 10,
  }}>
<ParamSelection/>
{
    state.selected != -1 && <Grid
      container
      item
      justify="space-between"
      alignItems="left"
      direction="column"
      spacing={5}
      style={{width:'350px', marginLeft: '10px'}}>
      <DatePickerView/>
}

Inside Param selection again a grid.

<Grid
  item
  container
  justify="flex-start"
  alignItems="left"
  direction="column"
  xs
  style={{width: '350px', marginLeft: '10px'}}
>
  <Grid item >
    <Typography variant="subtitle1" align="left">Select parameter for graph: </Typography>
  </Grid>

Currently it's showing like this:

Screenshot

I want select date to be on the same line as select parameter for graph, side by side.

Amit
  • 111
  • 2
  • 14
  • Does this answer your question? [Two divs side by side - Fluid display](https://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display) – HamiD Nov 18 '20 at 09:25
  • I have already tried float: left but it doesn't seem to work. – Amit Nov 18 '20 at 09:28

1 Answers1

0

Put both gird-elements in a div and add display:flex to the new-div.

<div class="parent"> <gird>element1</grid><grid>element2</grid>

style:

.parent{display:flex;};
HamiD
  • 1,075
  • 1
  • 6
  • 22