Cubi che si aprono, CSS

[nab23]

Salve, dovrei realizzare su un sito web due cubi che si aprono alternativamente dopo un click, ne ho realizzato uno e fatto copia e incolla dell'altro facendo tutte le considerazioni del caso, ma non riesco a metterlo verticale affianco.. qualcuno può darmi una mano? Ho usato solo HTML, CSS e pochissimo Javascript. Grazie in anticipo
(allego il CSS)

 .cube {
  position: relative;
  margin-left: 200px;
  margin-top: 400px;
  transform-style: preserve-3d;
  float: left;
}
.cube div {
  position: fixed;
  height: 100px;
  width: 100px;
  transform-style: preserve-3d;
}
.back {
  background: transparent;
}
.right {
  background: transparent;
  transform: rotateY(90deg);
  transform-origin: right;
  animation: open-y 1s ease-in-out forwards;
}
.bottom {
  background: transparent;
  transform: rotateX(270deg);
  transform-origin: bottom;
  animation: open-x 1s 2s ease-in-out forwards;
}
.top {
  background: transparent;
  transform: rotateX(90deg);
  transform-origin: top;
  animation: open-x 1s 3s ease-in-out forwards;
}
.left {
  background: transparent;
  transform: rotateY(270deg);
  transform-origin: left;
  animation: open-y 1s 4s ease-in-out forwards;
}
.front {
  background: transparent;
  transform: rotateY(270deg);
  transform-origin: right;
  animation: open-y 1s 4.5s ease-in-out forwards;
}
@keyframes open-y {
  to {
    transform: rotateY(180deg);
  }
}
@keyframes open-x {
  to {
    transform: rotateX(180deg);
  }
}


.ruota0 {
    transform: rotate(0deg);         /* standard */
    -webkit-transform: rotate(0deg);      /* Chrome - Safari */
    -moz-transform: rotate(0deg);     /* Firefox */
    -o-transform: rotate(0deg);         /* Opera */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);     /* IE */
  }
.ruota90 {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  }
.ruota180 {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  }
.ruota270 {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  }

.reflection {
    position:fixed;
}
.reflection img{ 
    transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
     -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    filter: flipv;
}
.reflectionX {
    position:fixed;
}

.reflectionX img{ 
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
     -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    filter: flipv;
}