React-Toolbox: Trying to align the Cards next to each other horizontally

Question

I am using React-Toolbox and within that context, how can I get these Card elements to align horizontally, one next to each other. I tried display: inline-block and it separated them out into three separate cards which was something I eventually wanted, but it does not align them one next to the other.

import { Card, CardText } from "react-toolbox/lib/card";

const ThemedCard = ({
  className,
  bodyTitle,
  bodyText = "",
  pageColor,
  actions = {}
}) => {
  return (
    <div>
      <TextBlock
        style={{
          padding: "1rem 0 3rem",
          fontSize: "3.5rem"
        }}
        component={Text}
      >
        {bodyText}
      </TextBlock>
      <h2>{bodyText}</h2>
      <Card
        {...{ className }}
        style={{ width: "350px", display: "inline-block" }}
      >
        <CardText>
          {bodyTitle ? <Title>{bodyTitle}</Title> : null}

          {objectToArray(actions).map(action => {
            return (
              <div>
                <ButtonLink {...action} to={urlResolver(action.to)} />
                <br />
                <br />
              </div>
            );
          })}
        </CardText>
      </Card>
      <Card
        {...{ className }}
        style={{ width: "350px", display: "inline-block" }}
      >
        <CardText>
          {bodyTitle ? <Title>{bodyTitle}</Title> : null}

          {objectToArray(actions).map(action => {
            return (
              <div>
                <ButtonLink {...action} to={urlResolver(action.to)} />
                <br />
                <br />
              </div>
            );
          })}
        </CardText>
      </Card>
      <Card
        {...{ className }}
        style={{ width: "350px", display: "inline-block" }}
      >
        <CardText>
          {bodyTitle ? <Title>{bodyTitle}</Title> : null}

          {objectToArray(actions).map(action => {
            return (
              <div>
                <ButtonLink {...action} to={urlResolver(action.to)} />
                <br />
                <br />
              </div>
            );
          })}
        </CardText>
      </Card>
    </div>
  );
};

Answer 1

You can try to use display: flex. Wrap all Card components in div with display: flex.

<div style={{display: flex}}>
  <Card
    {...{ className }}
    style={{ width: "350px" }}
  >
    <CardText>
      {bodyTitle ? <Title>{bodyTitle}</Title> : null}

      {objectToArray(actions).map(action => {
        return (
          <div>
            <ButtonLink {...action} to={urlResolver(action.to)} />
            <br />
            <br />
          </div>
        );
      })}
    </CardText>
  </Card>
  <Card
    {...{ className }}
    style={{ width: "350px" }}
  >
    <CardText>
      {bodyTitle ? <Title>{bodyTitle}</Title> : null}

      {objectToArray(actions).map(action => {
        return (
          <div>
            <ButtonLink {...action} to={urlResolver(action.to)} />
            <br />
            <br />
          </div>
        );
      })}
    </CardText>
  </Card>
 </div>