How to horizontally stack elements using CSS?

Problem :

I want to create a custom audio player, with basically:

• a button for playing
• a flexible bar, i.e., that adapts itself to the player width
• a group of button at the right of the player, namely for the download button etc

For the two first parts I have no problem (see the fiddle), but it's for the second button group I have troubles.

I tried to put the group with float:right, but in this case it is kicked out from the player. Then I tried to put the flexible bar with a floating property, but in this case I have to specify its width and it becomes no more flexible.

Here is a sample image of what I want to achieve:

Here is what I have so far:

HTML:

<div class="player" style="width:500px">
  <div class="group">
    <a class="button" href="#"></a> 
  </div>
  <div class="flexible">
    <div class="bar"></div>
  </div>
  <div class="clear"></div>
</div>

CSS:

.player 
{
    height:24px;
    background-color: #222222;
}

.player .group 
{    
    float:left;
}

.player .group .button,
.player .group2 .button
{
    display: inline-block;
    width:24px;
    height:24px;
    background-color:#444444;
}

.player .group2 
{
    float:right;
}

.player .flexible
{
    box-sizing:border-box;
    overflow:hidden;
}

.player .flexible .bar 
{
    margin : 8px;
    height : 8px;
    background-color:#225599;     
}

JSFiddle: https://jsfiddle.net/grh7sahq/3/

Do you have any advice ?

Thanks

Solution :

I understood you wanted the central part to be flexible. You can use display: flex. Really basic CSS to show it:

.player{
  background: black;
  height: 100px;
  display: flex;
}

.button{
  background: blue;
  height: 100px;
  width: 24px;
  display: block;
}

.flexible{
  flex: 1;
}

<div class="player" style="width:500px">
  <div class="group">
    <a class="button" href="#"></a> 
  </div>
  <div class="flexible">
    <div class="bar"></div>
  </div>
  <div class="group2">
    <a class="button" href="#"></a>
  </div>
</div>
<br/>

<div class="player" style="width:150px">
  <div class="group">
    <a class="button" href="#"></a> 
  </div>
  <div class="flexible">
    <div class="bar"></div>
  </div>
  <div class="group2">
    <a class="button" href="#"></a>
  </div>
</div>