Как сделать несколько divs inline отзывчивыми?

Question

Я создал элементы управления видео плеером, но я хочу знать, как я могу сделать его отзывчивым, чтобы сделать только перемещение скруббера, но кнопка воспроизведения или кнопка громкости остаются в одном месте и сохраняют одинаковое расстояние?

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> 
     &nbsp;&sol;&nbsp; 
     <span id='duration'></span> 
    </div> 
    </div> 
</div> 

Answer 1

Я создал Адаптивный дизайн, если у вас есть несколько DIV, когда вы повторно размер браузера?

Ниже мой HTML структура:

<div id="div-wrap"> 

      <div class="column-1-7"> ... </div> 

      <div class="column-2-7"> ... </div> 

      <div class="column-3-7"> ... </div> 

    </div> 

Ниже моя CSS структура:

#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; 
}