Can't get these rotating cubes to display side by side - html

Question

I found the code here to rotating cubes, which I wanted to use to display a photo on the front side and text on the other once hovered over.
<div class='box-scene'>
<div class='box'>
<div class='front face'>
<img src='http://placehold.it/180x180/' alt=''>
</div>
<div class="side face">
<p>This is back</p>
</div>
</div>
</div>
<div class='box-scene'>
<div class='box'>
<div class='front face'>
<img src='http://placehold.it/180x180/' alt=''>
</div>
<div class="side face">
<p>This is back</p>
</div>
</div>
</div>
.box-scene {
-webkit-perspective: 700;
width: 400px;
height: 200px;
margin: auto;
z-index: 999;
}
.box-scene:hover .box {
-webkit-transform: rotateY(-90deg);
}
.box {
width: 180px;
height: 180px;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0.4s ease-out;
-webkit-transform-origin: 90px 90px -90px;
/* float: left; */
margin: 30px auto;
}
.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-webkit-transform-origin: 0 0;
}
.front {
-webkit-transform: rotateY(0deg);
z-index: 2;
background: #d9d9d9;
}
.side {
background: #9dcc78;
-webkit-transform: rotateY(90deg);
z-index: 1;
left: 180px;
}
I've tried using display:inline, have tried putting them in separate columns using bootstrap, yet these two cubes will not line up side by side. Could anyone provide some more details on why they refuse to line up?

Answer 1

.box-scene css add float: left and change width to 49%;