title: Material UI: best way to set elements side by side
body: <p>I'm currently using Material UI to style an ecommerce project. I'm trying to figure out how to make all of the elements (Typography, Buttons) display side by side in a row instead of vertically.</p>
  <p>Is there a way to do this simply with material UI? Should I add CSS? I previously tried adding each element to a Grid item within a Container, it kind of worked (couldn't center), but doesn't seem like the right approach for this scenario.</p>
  <p>If you see my screenshot below, I'm trying to set &quot;T-Shirt Twilight&quot;, the image, &quot;$49.99&quot;, the quantity input buttons and &quot;Remove&quot; side by side horizontally.</p>
  <p><strong>Elements I'm trying to set side by side:</strong></p>
  <pre><code>  &lt;div className=&quot;App&quot;&gt;
          {products.map((item, index) =&gt; (
  
            &lt;Grid container item xs={12}&gt;
              &lt;Grid item xs={1} /&gt;
              &lt;Grid item xs={10}&gt;
  
                  &lt;Grid item xs={12} container key={item.id}&gt;
                      &lt;Grid item xs={1} /&gt;
                      &lt;Grid item xs={10}&gt;
  
                        &lt;Typography&gt;{item.title}&lt;/Typography&gt;
                        &lt;img src={require(`../images/${item.image}`)} className={classes.productImage}&gt;&lt;/img&gt;
                        &lt;Typography&gt;${(item.quantity * item.price).toFixed(2)}&lt;/Typography&gt;
  
                        &lt;ButtonGroup size=&quot;small&quot;&gt;
                          &lt;Button type=&quot;button&quot; onClick={item.quantity &gt; 1 ? () =&gt; decreaseQuantity(index) : null}&gt;-&lt;/Button&gt;
                          &lt;Button&gt;{item.quantity}&lt;/Button&gt;
                          &lt;Button type=&quot;button&quot; onClick={() =&gt; increaseQuantity(index)}&gt;+&lt;/Button&gt;
                        &lt;/ButtonGroup&gt;
  
                        &lt;Button
                          onClick={() =&gt; removeItem(index)}&gt;
                        Remove
                        &lt;/Button&gt;
  
                      &lt;/Grid&gt;
                      &lt;Grid item xs={1} /&gt;
                  &lt;/Grid&gt;
  
              &lt;/Grid&gt;
              &lt;Grid item xs={1} /&gt;
            &lt;/Grid&gt;
          ))}
        &lt;/div&gt;
  </code></pre>
  <p><strong>Screenshot for reference:</strong>
  <a href="https://i.stack.imgur.com/BAioT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BAioT.png" alt="enter image description here" /></a></p>
  <p><strong>Full code:</strong></p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import './../App.css';
  import * as ReactBootStrap from 'react-bootstrap';
  import {Link} from 'react-router-dom';
  import { getQuantity, getTotal } from '../helpers/helperTools';
  import {Grid, Typography,useMediaQuery, useTheme, Container, Button, ButtonGroup} from '@material-ui/core';
  import {makeStyles} from '@material-ui/core/styles';
  
  const useStyles = makeStyles((theme) =&gt; ({
      productImage: {
        maxWidth: '20%'
  }
  }))
  
  function Cart({ setQty: setParentQty }) {
      const classes = useStyles();
      const [products, setProducts] = useState([]);
  
      function updateQty(products){
          /* var holder = 0;
          products.forEach((a, b) =&gt; {
            holder = holder + a.quantity
          })*/
          // setQty({quantity: holder})
          // localStorage.setItem('quantity', JSON.stringify({ quantity: newQty }))
          setParentQty({ quantity: getQuantity(products) });
        }
  
      useEffect(function() {
        const storageItems = JSON.parse(localStorage.getItem('product'));
        const products = storageItems || [];
        setProducts(products);
        updateQty(products);
      }, []);
  
      function decreaseQuantity(index) {
        if (products[index]){
          const newProducts = products.map((a, b) =&gt; {
            if (b === index) return {...a, quantity: a.quantity - 1}
            else return a
          });
  
          setProducts(newProducts);
          localStorage.setItem('product', JSON.stringify(newProducts))
          updateQty(newProducts)
        }
      }
  
      function increaseQuantity(index) {
          if (!products[index]) return;
  
          const newProducts = products.map((a, b) =&gt; {
            if (b === index) return {...a, quantity: a.quantity + 1}
            else return a
          })
  
          setProducts(newProducts)
          localStorage.setItem('product', JSON.stringify(newProducts))
          updateQty(newProducts);
      }
  
      function removeItem(index){
        const product = products[index];
  
        if (!product) return;
  
        const newProducts = products.filter((v, z) =&gt; z !== index);
        setProducts(newProducts);
  
        localStorage.setItem('product', JSON.stringify(newProducts));
  
        updateQty(newProducts);
      }
  
       if (products.length === 0) {
         return (
           &lt;div className=&quot;App&quot;&gt;
            &lt;p&gt;
              Cart Empty
            &lt;/p&gt;
            &lt;Link to={`/`}&gt;
            &lt;p&gt;Continue shopping&lt;/p&gt;
            &lt;/Link&gt;
           &lt;/div&gt;)
       }
  
      return (
        &lt;div className=&quot;App&quot;&gt;
          {products.map((item, index) =&gt; (
  
            &lt;Grid container item xs={12}&gt;
              &lt;Grid item xs={1} /&gt;
              &lt;Grid item xs={10}&gt;
  
                  &lt;Grid item xs={12} container key={item.id}&gt;
                      &lt;Grid item xs={1} /&gt;
                      &lt;Grid item xs={10}&gt;
  
                        &lt;Typography&gt;{item.title}&lt;/Typography&gt;
                        &lt;img src={require(`../images/${item.image}`)} className={classes.productImage}&gt;&lt;/img&gt;
                        &lt;Typography&gt;${(item.quantity * item.price).toFixed(2)}&lt;/Typography&gt;
  
                        &lt;ButtonGroup size=&quot;small&quot;&gt;
                          &lt;Button type=&quot;button&quot; onClick={item.quantity &gt; 1 ? () =&gt; decreaseQuantity(index) : null}&gt;-&lt;/Button&gt;
                          &lt;Button&gt;{item.quantity}&lt;/Button&gt;
                          &lt;Button type=&quot;button&quot; onClick={() =&gt; increaseQuantity(index)}&gt;+&lt;/Button&gt;
                        &lt;/ButtonGroup&gt;
  
                        &lt;Button
                          onClick={() =&gt; removeItem(index)}&gt;
                        Remove
                        &lt;/Button&gt;
  
                      &lt;/Grid&gt;
                      &lt;Grid item xs={1} /&gt;
                  &lt;/Grid&gt;
  
              &lt;/Grid&gt;
              &lt;Grid item xs={1} /&gt;
            &lt;/Grid&gt;
          ))}
        &lt;/div&gt;
  
      );
  }
  
  export default Cart;
  </code></pre>