Positioning a div between two buttons - html

Question

I'm trying to have a remote control with some buttons, and a div with the now playing info between two of them.
but it doesn't work.
as you can see, on an actual ipad, it renders differently, and i don't know how to fix it.
html:
<div id="buttons">
<button id="prev" class="control" onmousedown="skip('prev')"></button>
<div id="info"> gfegrbhthehrerhg</div>
<button id="next" class="control" onmousedown="skip('next')"></button><br />
<button id="rwd" class="control" onmousedown="changeSpeed(-2)"></button>
<button id="stop" class="control" onmousedown="emitCommand('stop')"></button>
<button id="play" class="control" onmousedown="emitCommand('play: loop: true speed: 100')"></button>
<button id="ffwd" class="control" onmousedown="changeSpeed(2)"></button>
css:
button.control {
display: inline-block;
width:150px;
height:150px;
background-size: 150px 150px;
border:0;
margin: 0.5%;
}
div#info {
width:300px;
height: 150px;
margin: 0 1.1%;
position: relative;
top: -58px;
margin-bottom: -50px;
border:1px solid red;
display: inline-block;
}
button#prev {
margin-left: 160px;
}
button#rwd {
margin-left: 160px;
}
#buttons {
margin: 0 auto;
border: 1px solid lightgray;
}
what am I doing wrong? what is the correct way to accomplish this?
Thanks

Answer 1

Add
vertical-align: top; to div#info
And remove the top: -58px; from div#info too
Here's a link to a working example: EXAMPLE LINK

Answer 2

Use a simple 4x2 grid system:
#buttonsWrapper {
margin: 0 auto;
border: 1px solid #BC5555;
height: 300px;
width: 600px;
}
.col4{width: 100%; float: left;}
.col3{width: 75%; float: left;}
.col2{width: 50%; float: left;}
.col1{width: 25%; float: left;}
.col1-height{height: 0; padding-bottom: 25%;} /* make 25% width squared */
.row{
clear: both;
}
#prev, #next, #rwd, #stop, #play, #ffwd{
-webkit-border-radius: 15px;
border-radius: 15px;
background-color: #888;
-webkit-transform: scale(0.95,0.95); /* Safari */ /* scale down to 95% */
transform: scale(0.95,0.95); /* scale down to 95% */
}
#info{
background-color: #ddd;
}
<div id="buttonsWrapper">
<div class="row">
<div id="prev" class="col1 col1-height"></div>
<div id="info" class="col2 col1-height"></div>
<div id="next" class="col1 col1-height"></div>
</div>
<div class="row">
<div id="rwd" class="col1 col1-height"></div>
<div id="stop" class="col1 col1-height"></div>
<div id="play" class="col1 col1-height"></div>
<div id="ffwd" class="col1 col1-height"></div>
</div>
</div>