expand one div of all divs to take full width on hover

Question

i coded a 6 divs beside each other

how can i make one div only to expand to take full width of wrapped div on hover and the other 5 divs get on bottom to the fully expanded div

html:

<div class="row">

<div class="col-md-2" id="discuss_block">
div1.....
</div>

<div class="col-md-2" id="discuss_block">
div2.....
</div>

<div class="col-md-2" id="discuss_block">
div3.....
</div>

<div class="col-md-2" id="discuss_block">
div4.....
</div>

<div class="col-md-2" id="discuss_block">
div5.....
</div>

<div class="col-md-2" id="discuss_block">
div6.....
</div>

</div>

css:

#discuss_block{
    background: #FFBC2F;
    color: #FFF;
    z-index: 30;
    top: 0px;

}

#discuss_block:hover{
 width:100%;  
}

Answer 1

You can use float:left http://jsfiddle.net/sfnxkav5/1/

#discuss_block{
width:50px;
float:left;
background: #FFBC2F;
color: #FFF;
z-index: 30;
top: 0px;
}