```css
.page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.items {
  float: left;
}

.secondItem {
  vertical-align: text-top;
  float: right;
}

.page-header table,
th,
td {
  border: 1px solid;
  display: block;
  background-color: white;
  opacity: 80%;
  table-layout: fixed;
}

.tableBody {
  display: inline-block;
  width: 100%;
}
```

```html
<div className="page">
  <Typography>
    <table className="items">
      <tbody>
        <tr>
          <th className="header">items:</th>
        </tr>
        <th>
          Hi
        </th>
      </tbody>
      <tbody className="tableBody">
        {Items.map((item, i) => (
        <td key={item.id}>
          item:{item.id}
          <br />
        </td>
        ))}
      </tbody>
    </table>
    <Table className="secondItem">
      <TableHead>
        <TableRow>
          <TableCell>Second:</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            Item
          </TableCell>
        </TableRow>
      </TableHead>
      <tbody className="secondBody">
        <td>
          {seconds.map((second) => (
          <tr key={second.id}>
            {second.data.text}
          </tr>
          ))}
        </td>
      </tbody>
    </Table>
    <br />
  </Typography>
</div>
); };
```

I would like to place my two tables side by side but the second table is now placed below the first table instead. How do I style it so that the table is next to each other?

![Position of the table](https://i.stack.imgur.com/uQ14U.png)

I have added my code and have tried many methods for CSS such as float:left, float: right, etc. I am currently a beginner and have no idea on how to style the table.