My goal is to showcase the content of two div elements in a single row, so I decided to enclose them within another div and adjust its display property to flex. However, despite both divs being displayed on the same row, they appear stacked on top of each other instead of side by side.
https://i.sstatic.net/WqT2b.png
I followed this suggestion, but unfortunately it did not yield the desired result.
This snippet showcases the code for my component:
<TableFooter>
<TableRow>
<div className="crud-footer">
<div className="col-6">
<TablePagination
count={data.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={this.handleChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage}
/>
</div>
<div className="col-6 crud-controls">
<Fab className="jr-fab-btn bg-blue text-white">
<i className="zmdi zmdi-plus zmdi-hc-fw"/>
</Fab>
<Fab className="jr-fab-btn bg-yellow text-white">
<i className="zmdi zmdi-edit zmdi-hc-fw"/>
</Fab>
<Fab className="jr-fab-btn bg-red text-white">
<i className="zmdi zmdi-delete zmdi-hc-fw"/>
</Fab>
</div>
</div>
</TableRow>
</TableFooter>
Additionally, here is the associated css styling for the divs:
.crud-footer {
display: flex;
flex-direction: row;
}
.crud-controls {
display: flex;
text-align: right;
}