Material Card content overrunning icon bar

I am using Material UI cards. I have an icon bar at the bottom of each card. The media in the card is overrunning the icon bar as shown in the image here:

Here is the code where I put together the components:

return (
  <Card className={classes.card} >
    <CardHeader
      avatar={
        <Avatar aria-label={authorAvatar} src={authorImg} className={classes.avatar}/>
      }
      action={
        <Fieldset className={classes.date}>
          {postDate}
        </Fieldset>
      }
      title={post.title}          
      subheader={
        <Link to={userUrl}>
          {authorName}
        </Link>
      }
    />
    <div>
      <CardContent >
        <div className={classes.content} dangerouslySetInnerHTML=></div>
      </CardContent>
    </div>
    <CardActions className={classes.actions} >
      <IconButton
        className={classnames(classes.unliked, {
          [classes.liked]: this.state.liked,
        })}
        aria-label="Add to favorites"
        onClick={this.handleFavourite}
      >
        <FavoriteIcon />
      </IconButton>

Here are the classes:

const styles = theme => ({
  card: {
    marginTop: 20,
    sizing, maxHeight: 600,
  },
  content: {
    height: 50,
    marginBottom: 100,
    //paddingTop: '56.25%', // 16:9
    //sizing, maxHeight: 50,
  },
  actions: {
    marginTop: 20,
    display: 'flex',
  },

How do I get these things to work nicely, where the content stops before the icon bar with an adjustable margin?

from Material Card content overrunning icon bar