html - Positioning a div between two buttons -

i'm trying have remote control buttons, , div playing info between 2 of them.

but doesn't work.

as can see, on actual ipad, renders differently, , don't know how 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 doing wrong? correct way accomplish this? thanks

add

vertical-align: top; div#info

and remove top: -58px; div#info too

here's link working example: example link