I wanted to create a masonry like layout where when you click on an div then it resizes to full screen or at least become bigger than the other divs. Something like pinterest, where when you click on an image then that image becomes bigger. but in my code, I've been able to generate random height and color for the divs but the widths of the divs are too small and when I click on it then it doesn't scale to 100% of the screen. I also want them to be toggleable, where if I click on a fullscreen div again then, it comes back to it's normal size or the random height that will be generated. what am I doing wrong in the code?

```
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.addActiveClass = this.addActiveClass.bind(this);
    this.state = {
      activeIndex: -1
    };
  }
  addActiveClass(activeIndex) {
    this.setState(prev => ({
      activeIndex: prev.activeIndex === activeIndex ? -1 : activeIndex
    }));
  }

  render() {
    return (
      <div className="container">
        {Array.from({ length: 30 }).map((item, index) => {
          return (
            <div
              key={index}
              style={{
                background: randomColor(colors),
                height: randomHeight(100, 200)
              }}
              className={this.state.activeIndex === index ? "full" : ""}
              onClick={() => this.addActiveClass(index)}
            />
          );
        })}
      </div>
    );
  }
}

```

```
* {
  box-sizing: border-box;
}

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
  font: 2em Sansita, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 100vh;
  align-items: flex-start
}

.container > * {
  border: 2px solid orange;
  border-radius: 5px;
  margin: 10px;
  padding: 10px 20px;
  background-color: red;
  color: #fff;
}

.full{
  width: 100%;
  height: 100%;
  transition: 2s;
}

```

[sandbox](https://codesandbox.io/s/red-mountain-z8dcq?file=/src/styles.scss:0-465)