Rotate/Transform Material-UI List

I'm trying to use React Material-UI and the Drawer API to build a navigation sidebar with the buttons rotated (a stacked list with the buttons turned 90 degrees). I only have a few buttons I'd like to use so I'm trying to do this with the permanent Drawer setup. I was wondering if anyone had any examples or solutions to this. Presently I have this in a CSS file:

.horiz-list {
    display: inline-block;
    transform: rotate(270deg);
    height: 80px;
    width: 50px;
}

and this as an example in my sidebar code:

const button = {
      text: "Photos",
      onClick: () => history.push('/photos')
    };

<Drawer
          className={classes.drawer}
          variant="permanent"
          classes={{
              paper: classes.drawerPaper,
          }}
        >
            <Toolbar />
            <div className={classes.drawerContainer}>
              <Divider />
              <List>
                <ListItem button key={button.text} onClick={button.onClick}>
                  <ListItemText primary={button.text} className="horiz-list" />
                </ListItem>
              </List>
              <Divider />
            </div>
</Drawer>

Right now, some of the labels end up off screen and with the slider at the bottom. Thanks in advance!