Q:

posicionar en linea

Quiero posicionar en fila, pero no encima 

.caja {
  display: inline-block;
}

.uno {
  width: 10px;
  height: 10px;
  background-color: red;
}

.dos {
  width: 10px;
  height: 10px;
  background-color: blue;
}
<div class="caja">
  <div class="uno">
  </div>

  <div class="dos">


  </div>
</div>

A:

Simplemente debes darle la propiedad display: inline-block; a los elementos que quieres posicionar uno al lado del otro y no a su elemento padre:
Nota: la propiedad vertical-align alinea verticalmente los elementos que contienen display: inline-block;

.uno {
  width: 10px;
  height: 10px;
  background-color: red;
  display: inline-block;
  vertical-align: middle;
}

.dos {
  width: 10px;
  height: 10px;
  background-color: blue;
  display: inline-block;
  vertical-align: middle;
  margin-left: -4px;
}
<div class="caja">
  <div class="uno">
  </div>

  <div class="dos">


  </div>
</div>

A:

Una solución moderna:

.flexbox {
  display: flex;
}

.div {
  width: 10px;
  height: 10px; 
}

.uno { 
  background-color: red;
}

.dos {
  background-color: blue;
}
<div class="flexbox">
  <div class="div uno"></div>
  <div class="div dos"></div>
</div>

A:

Debes quitar el inline-block del padre y puedes agregar la propiedad float: left; a los dos elementos para que flote uno al lado del otro.

.uno {
  width: 10px;
  height: 10px;
  background-color: red;
  float: left;
}

.dos {
  width: 10px;
  height: 10px;
  background-color: blue;
  float: left;
}
<div class="caja">
  <div class="uno">
  </div>

  <div class="dos">


  </div>
</div>

