An Inline Relative Div with Absolute Divs In It - html

Question

The following is my markup:
.play-controls {
.fa-play, .fa-pause {
font-size: 25px;
}
}
.volume-controls {
display: inline-block;
position: relative;
.overlay {
background-color: $highlight;
height: 10px;
border-radius: 5px;
width: 0px;
position: absolute;
z-index: 15;
}
.background {
background-color: $text-color;
width: 100px;
height: 10px;
border-radius: 5px;
position: absolute;
z-index: 10;
}
.circle {
border-radius: 100%;
position:absolute;
background-color: #fff;
border: 1px solid;
height: 15px;
width: 15px;
z-index: 20;
top: -3px;
}
}
.player {
#album-artwork {
width: 80px;
height: 80px;
vertical-align: middle;
display:inline-block;
margin-right: 10px;
}
.wrapper {
display:inline-block;
.information {
margin-bottom: 5px;
#song-title {
font-size: 22px;
font-weight:bold;
margin-right: 5px;
}
#artist-album {
font-size: 18px;
}
}
.progress-bar {
position: relative;
.overlay {
background-color: $highlight;
height: 10px;
border-radius: 5px;
width: 0px;
position: absolute;
z-index: 15;
}
.background {
background-color: $text-color;
width: 600px;
height: 10px;
border-radius: 5px;
position: absolute;
z-index: 10;
}
.circle {
border-radius: 100%;
position:absolute;
background-color: #fff;
border: 1px solid;
height: 15px;
width: 15px;
z-index: 20;
top: -3px;
}
}
}
}
<div class="play-controls">
<i class="fa fa-play" id="playpause"></i>
</div>
<div class="volume-controls">
<div class="background"></div>
<div class="circle"></div>
<div class="overlay"></div>
</div>
<div class="player">
<img id="album-artwork" src="build/images/guero.jpg">
<div class="wrapper">
<div class="information">
<span id="song-title">Go It Alone</span>
<span id="artist-album">Beck - Guero</span>
</div>
<div class="progress-bar">
<div class="background"></div>
<div class="circle"></div>
<div class="overlay"></div>
</div>
</div>
</div>
The divs with classes background, circle, and overlay in volume-controls are all position: absolute; with volume-controls as position: relative;.
Upon making play-controls, volume-controls, and player inline, play-controls is inline with volume-controls, but volume-controls is overlapping the player.
How would I be able to set everything in one line, without any overlapping?
EDIT: JSFiddle

Answer 1

You could float:left; the 3 main parts or display:inline-block; them the issue the player is over the volume-controls is because of the absolute positioned elements in the volume-controls. You could add a width to volume-controls.
.volume-controls {
display: inline-block;
position: relative;
width:150px;
}
Here is the fiddle