I have a question that bears resemblance to another one found on this site.
I decided to create my own version of the Material UI Card example from https://material-ui.com/demos/cards/. You can view and edit my version on the sandbox editor by clicking here.
Essentially, I am trying to arrange Material UI cards horizontally in a single row within a parent container. If the cards don't fit in this row, they should automatically form a new row below.
When I use the following code:
render(
<div className="row">
<Demo /> <Demo />
</div>,
rootElement
);
I anticipate seeing the two cards displayed side by side.
Even after adding styles using display: "inline-block", the cards still stack vertically as shown in the snippet below:
const styles = {
card: {
minWidth: 275,
display: "inline-block"
}
};