Les Divs utilisant inline-block se chevauchent

Question

J'ai un problème avec mes divs qui se chevauchent, sans espace entre eux. J'ai essayé d'aligner le texte au centre, de supprimer et d'ajouter des espaces blancs entre les divs, de définir des marges, mais rien ne semble fonctionner. J'ai juste besoin que ces éléments soient espacés les uns des autres. Toute aide est la bienvenue.

Voici un exemple de violon : https://jsfiddle.net/vn6t3nwd/

HTML :

<div id="timer-container">
  <div id="timermode">up</div><div id="timermode">down</div>
  <div id="timercontrol">stop</div>
  <div id="timercontrol">go</div>
</div>

CSS :

#timer-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    display: table;
    background-color: black;
}

#timermode {
    position: absolute;
    width: 30%;
    font-family: "Avenir-Light";
    font-size: 40px;
    color: white;
    vertical-align: top;
    display: inline-block;
}

#timercontrol {
    position: absolute;
    display: inline-block;
    font-size: 40px;
    font-family: "Avenir-Light";
    color: white;
}

Edit : Le problème était d'avoir position : absolute, mais en le supprimant, la hauteur de mon arrière-plan augmente légèrement. Je pense que c'est dû à mon padding de 56,25% sur le fond mais j'ai besoin de l'avoir. Comment faire pour avoir les deux ?

Edit2 : Mise à jour du bidule avec la réponse. J'ai contourné mon augmentation de hauteur en ajoutant un autre conteneur.