How to make multiple divs inline responsive? - html

Question

I have created a video player controls but I want to know how can I make it responsive as to make only the scrubber move but the play button or volume button to stay in the same place and keep the same distance?
CSS
#videoControls{
height:8%;
top:92%;
width:100%;
background-color:#d92a2e;
background-color: rgba(0,0,0,0.4);
position:relative;
-webkit-transition: top .5s ease-in;
-moz-transition: top .5s ease-in;
-ms-transition: top .5s ease-in;
-o-transition: top .5s ease-in;
transition: top .5s ease-in;
}
[class^="col-"] ,[class*= " col-"]{
position: relative;
top: 50%;
float: left;
}
.col-80{
width: 80%;
}
.col-7-5{
width: 32px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.col-7-6{
width: 7.5%;
}
.col-5{
width: 5%;
}
HTML
<div class='controls' id='videoControls'>
<div class='col-5'>
<div class='btnGrp'>
<div id='play' class='playBtn'></div>
<div id='pause' class='pauseBtn'></div>
</div>
</div>
<div class='col-80'>
<div id='scrubber'>
<div id='track'></div>
<div id='handle' class='draggable'></div>
<div id='handle2' class=''></div>
</div>
</div>
<div class='col-7-5'>
<div class='btnGrp'>
<div id='mute' class='muteBtn'></div>
<div id='unmute' class='unmuteBtn'></div>
</div>
</div>
<div class='col-7-6'>
<div id='timeDisplay'>
<span id='currentTime'></span>
&sol;
<span id='duration'></span>
</div>
</div>
</div>

Answer 1

I have created the Responsive design if you have multiple div when you re-size the browser?
Following is my html structure:
<div id="div-wrap">
<div class="column-1-7"> ... </div>
<div class="column-2-7"> ... </div>
<div class="column-3-7"> ... </div>
</div>
Below is my css structure:
#div-wrap {
white-space: nowrap;
max-width: 100%;
}
.column-1-7,.column-2-7,.column-3-7 {
width: calc(100% / 3);
display: inline-block;
text-align: center;
}
.column-1-7{
background: #ffcc00;
}
.column-2-7{
background: #ffff00;
}
.column-3-7{
background: #ffccff;
}