Material Grid refused to lay out horizontal even it’s default behavior

I read about Material-UI and trying to make two components sid by side and that is the default as I understand but whatever I try it looks like this:

enter image description here

Material Grid refused to go horizontal even it’s default behavior. I even tried with something super simple like this:

<Grid container>
  <Grid item xs={6} sm={2} md={8} lg={12} xl={3} style={{background:randomColor()}}>
     Hooray something is here!
  </Grid>
  <Grid item xs={6} sm={10} md={4} lg={12} xl={9} style={{background:randomColor()}}>
     Hooray something is too!
  </Grid>
</Grid>

And that code writes the text vertically.

This is my code and I must be doing something fundamentally wrong but I cant see it.

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import Input from "../components/input/Input";
import Button from "../components/button/Button";
import { withStyles } from "@material-ui/styles";
import { Grid, Page, Container, makeStyles } from "@material-ui/core";
import { actionCreators, clearPosts } from "../redux/books/books.action";
import EnhancedTable from "./Logger";

const marginStyle = {
  marginTop: "30px",
};

const styles = (theme) => ({
  root: {
    flexGrow: 1,
  },
  productCard: {
    height: "100%",
  },
  border: {
    bgcolor: "background.paper",
    borderColor: "text.primary",
    m: 1,
    border: 1,
    style: { width: "5rem", height: "5rem" },
  },
});

class FormContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      localBook: {
        title: "",
        author: "",
        genre: "",
        price: "",
      },
    };

    this.handleTitle = this.handleTitle.bind(this);
    this.handleAuthor = this.handleAuthor.bind(this);
    this.handleGenre = this.handleGenre.bind(this);
    this.handlePrice = this.handlePrice.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handleClearForm = this.handleClearForm.bind(this);
  }

  handleTitle(e) {
    let value = e.target.value;
    this.setState(
      (prevState) => ({
        localBook: {
          ...prevState.localBook,
          title: value,
        },
      }),
      () => console.log(this.state.localBook)
    );
  }

  handleAuthor(e) {
    let value = e.target.value;
    this.setState(
      (prevState) => ({
        localBook: {
          ...prevState.localBook,
          author: value,
        },
      }),
      () => console.log(this.state.localBook)
    );
  }

  handleGenre(e) {
    let value = e.target.value;
    this.setState(
      (prevState) => ({
        localBook: {
          ...prevState.localBook,
          genre: value,
        },
      }),
      () => console.log(this.state.localBook)
    );
  }

  handlePrice(e) {
    let value = e.target.value;
    this.setState(
      (prevState) => ({
        localBook: {
          ...prevState.localBook,
          price: value,
        },
      }),
      () => console.log(this.state.localBook)
    );
  }

  handleFormSubmit(e) {
    e.preventDefault();
    this.props.actionCreators.requestBooks(this.state.localBook);
  }

  handleClearForm(e) {
    e.preventDefault();
    this.props.clearPosts();
    this.setState({
      localBook: {
        title: "",
        author: "",
        genre: "",
        price: "",
      },
    });
  }

  render() {
    const { classes } = this.props;
    return (
      <Container maxWidth={false}>
        <Grid item xs={12}>
          <Grid container className={classes.root} justify="center" spacing={3}>
            <Grid item lg={6} sm={6} xl={6} xs={12}>
              <div style={marginStyle}>
                <form
                  className="container-fluid"
                  onSubmit={this.handleFormSubmit}
                >
                  <Input
                    inputtype={"text"}
                    title={"Title"}
                    name={"title"}
                    value={this.state.localBook.title}
                    placeholder={"Enter Title"}
                    handlechange={this.handleTitle}
                  />{" "}
                  {/* Title */}
                  <Input
                    inputtype={"text"}
                    title={"Author"}
                    name={"author"}
                    value={this.state.localBook.author}
                    placeholder={"Enter Author"}
                    handlechange={this.handleAuthor}
                  />{" "}
                  {/* Author */}
                  <Input
                    inputtype={"text"}
                    title={"Genre"}
                    name={"genre"}
                    value={this.state.localBook.genre}
                    placeholder={"Enter Genre"}
                    handlechange={this.handleGenre}
                  />{" "}
                  {/* Genre */}
                  <Input
                    inputtype={"text"}
                    title={"Price"}
                    name={"price"}
                    value={this.state.localBook.price}
                    placeholder={"Enter Price"}
                    handlechange={this.handlePrice}
                  />{" "}
                  {/* Price */}
                  <Button
                    action={this.handleFormSubmit}
                    type={"primary"}
                    title={"Submit"}
                    style={buttonStyle}
                  />{" "}
                  {/*Submit */}
                  <Button
                    action={this.handleClearForm}
                    type={"secondary"}
                    title={"Clear"}
                    style={buttonStyle}
                  />{" "}
                  {/* Clear the form */}
                </form>
              </div>
            </Grid>
          </Grid>

          <Grid item xs={12}>
            <Grid item lg={6} sm={6} xl={6} xs={12}></Grid>
            <EnhancedTable />
          </Grid>
        </Grid>
      </Container>
    );
  }
}

const buttonStyle = {
  margin: "10px 10px 10px 10px",
};

// const mapDispatchToProps = dispatch => ({
//  setUserRoleToUser: () => dispatch(clearPosts()),
// });

function mapDispatchToProps(dispatch) {
  return {
    actionCreators: bindActionCreators(actionCreators, dispatch),
    clearPosts: () => dispatch(clearPosts()),
  };
}

export default connect(
  null,
  mapDispatchToProps
)(withStyles(styles)(FormContainer));

Answer

First of all a Grid item should always be wrapped by a Grid container. So you should remove <Grid item xs={12}> after your container or wrapped it by another Grid with the container tag.

In addition to that, the grids which should share one row have to be next to each other. This means that you have to move your Grid with the EnhancedTable component. Your code would then look like this:

...

class FormContainer extends Component {

  ...

  render() {
    const { classes } = this.props;
    return (
      <Container maxWidth={false}>
          <Grid container className={classes.root} justify="center" spacing={3}>
            <Grid item lg={6} sm={6} xl={6} xs={12}>
              <div style={marginStyle}>
                <form
                  className="container-fluid"
                  onSubmit={this.handleFormSubmit}
                >
                  <Input
                    inputtype={"text"}
                    title={"Title"}
                    name={"title"}
                    value={this.state.localBook.title}
                    placeholder={"Enter Title"}
                    handlechange={this.handleTitle}
                  />{" "}
                  {/* Title */}
                  <Input
                    inputtype={"text"}
                    title={"Author"}
                    name={"author"}
                    value={this.state.localBook.author}
                    placeholder={"Enter Author"}
                    handlechange={this.handleAuthor}
                  />{" "}
                  {/* Author */}
                  <Input
                    inputtype={"text"}
                    title={"Genre"}
                    name={"genre"}
                    value={this.state.localBook.genre}
                    placeholder={"Enter Genre"}
                    handlechange={this.handleGenre}
                  />{" "}
                  {/* Genre */}
                  <Input
                    inputtype={"text"}
                    title={"Price"}
                    name={"price"}
                    value={this.state.localBook.price}
                    placeholder={"Enter Price"}
                    handlechange={this.handlePrice}
                  />{" "}
                  {/* Price */}
                  <Button
                    action={this.handleFormSubmit}
                    type={"primary"}
                    title={"Submit"}
                    style={buttonStyle}
                  />{" "}
                  {/*Submit */}
                  <Button
                    action={this.handleClearForm}
                    type={"secondary"}
                    title={"Clear"}
                    style={buttonStyle}
                  />{" "}
                  {/* Clear the form */}
                </form>
              </div>
            </Grid>
            <Grid item lg={6} sm={6} xl={6} xs={12}>
                <EnhancedTable />
            </Grid>
          </Grid>
      </Container>
    );
  }
}

...