Can't vertically align two divs - html

Question

So I'm trying to align 2 divs side by side. Here's my markup
<div id="DIV_1">
<div id="DIV_2">
</div>
<div id="DIV_3">
<div id="DIV_4">
<div id="DIV_5">
0
</div>
<div id="DIV_6">
Likes
</div>
</div>
<div id="DIV_7">
<div id="DIV_8">
1
</div>
<div id="DIV_10">
Followers
</div>
</div>
</div>
</div>
And my CSS
#DIV_1 {
height: 81px;
width: 864px;
perspective-origin: 432px 40.5px;
transform-origin: 432px 40.5px;
font: normal normal normal 16px/normal sans-serif;
}/*#DIV_1*/
#DIV_2 {
height: 40px;
width: 40px;
perspective-origin: 20px 20px;
transform-origin: 20px 20px;
background: rgb(0, 157, 255) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal 16px/normal sans-serif;
}/*#DIV_2*/
#DIV_3 {
height: 41px;
text-align: center;
width: 187px;
perspective-origin: 93.5px 20.5px;
transform-origin: 93.5px 20.5px;
font: normal normal normal 16px/normal sans-serif;
margin: 0px 338.5px;
}/*#DIV_3*/
#DIV_4 {
color: rgb(70, 70, 70);
display: table-cell;
height: 33px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
vertical-align: middle;
width: 92px;
perspective-origin: 46.5px 20.5px;
transform-origin: 46.5px 20.5px;
border-top: 0px none rgb(70, 70, 70);
border-right: 1px solid rgb(146, 146, 146);
border-bottom: 0px none rgb(70, 70, 70);
border-left: 0px none rgb(70, 70, 70);
font: normal normal normal 16px/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
padding: 4px 0px;
}/*#DIV_4*/
#DIV_5 {
color: rgb(70, 70, 70);
height: 17px;
letter-spacing: 0.18000000715255737px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
width: 92px;
perspective-origin: 46px 8.5px;
transform-origin: 46px 8.5px;
border: 0px none rgb(70, 70, 70);
font: normal normal 500 15px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
}/*#DIV_5*/
#DIV_6 {
color: rgb(70, 70, 70);
height: 16px;
letter-spacing: 0.3479999899864197px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
width: 92px;
perspective-origin: 46px 8px;
transform-origin: 46px 8px;
border: 0px none rgb(70, 70, 70);
font: normal normal 300 12px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
}/*#DIV_6*/
#DIV_7 {
color: rgb(70, 70, 70);
display: table-cell;
height: 33px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
vertical-align: middle;
width: 94px;
perspective-origin: 47px 20.5px;
transform-origin: 47px 20.5px;
border: 0px none rgb(70, 70, 70);
font: normal normal normal 16px/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
padding: 4px 0px;
}/*#DIV_7*/
#DIV_8 {
color: rgb(70, 70, 70);
height: 17px;
letter-spacing: 0.18000000715255737px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
width: 94px;
perspective-origin: 47px 8.5px;
transform-origin: 47px 8.5px;
border: 0px none rgb(70, 70, 70);
font: normal normal 500 12px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
}/*#DIV_8*/
#A_9 {
color: rgb(102, 153, 255);
letter-spacing: 0.18000000715255737px;
text-align: center;
text-decoration: none solid rgb(102, 153, 255);
border: 0px none rgb(102, 153, 255);
font: normal normal 500 15px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(102, 153, 255) none 0px;
}/*#A_9*/
#DIV_10 {
color: rgb(70, 70, 70);
height: 16px;
letter-spacing: 0.3479999899864197px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
width: 94px;
perspective-origin: 47px 8px;
transform-origin: 47px 8px;
border: 0px none rgb(70, 70, 70);
font: normal normal 300 12px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
}/*#DIV_10*/
I've tried changing the display and everything. For some reason I just can't get the square to be vertically aligned with the other following count. Also here's a demo http://jsfiddle.net/z6jAA/1/

Answer 1

Add display: inline-block on #DIV_2 and #DIV_3, and remove the margin on #DIV_3.
Fiddle: http://jsfiddle.net/z6jAA/2/

Answer 2

Have you tried using the following properties and values for the CSS declaration?
#idName { float: left; position: relative; }
Code example:
HTML
<div id="div1">bla </div>
<div id="div2"> bla2</div>
CSS
#div1 {
float: left;
position: relative;
}
#div2 {
float: left;
position: relative;
}