.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%;
}<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 am facing an issue where my two tables are stacking on top of each other instead of being displayed side by side. How can I adjust the styling to have them sit next to each other?
Despite trying CSS methods like float:left and float:right, I'm unable to achieve the desired layout for my tables. As a beginner, I'm unsure how to proceed with styling them appropriately.