Div al lado de otro

[guzzano]

Tengo una duda desde que comencé con esto del etiquetado web, siempre me da uno que otro dolor de cabeza. La duda es la siguiente, ¿cómo coloco un div al lado de otro? Por ejemplo, tengo lo siguiente:

Código HTML:

<div style = "padding-top: 20%;">
                <div style = "width:380px; height: 14px; padding-left: 40px; text-align: center;">
                    <div id = "play" style = "display: inline-block; cursor: pointer; background-image: url(recursos/imagenes/play.gif); width: 16px; height: 17px;"></div>
                    <div id = "pause" style = "display: inline-block; cursor: pointer; background-image: url(recursos/imagenes/pause.gif); width: 16px; height: 17px;"></div>
                    <div id = "autor" style = "-vertical-align: middle; display: inline-block; cursor: default;"><b>Pink Floyd</b> - Shine On You Crazy Diamond</div>
                    <div id = "tiempo" style = "display: none;">(<span id = "currentTime" style = "font-size:10px;"></span> / <span id = "duration" style = "font-size:10px;"></span>)</div>
                    <div id="jquery_jplayer_1" class="jp-jplayer"></div> 
                </div>
            </div>
 

Necesito color un div al lado de este, para que quede en la misma linea. ¿Cómo hago tal cosa? siempre me lo termina poniendo una linea más abajo ó en la misma linea pero al comienzo (si uso position: absolute)



Saludos, y buen día.