Three divs in a CSS line

Question

<div id="firstRow"> <div id="one">AAA</div> <div id="two"><input style="width: 100%" type="search"></div> <div id="three">AAAAAA</div> </div> 

I have three div s.

• I want to put a div with id one left. The width of the div alone depends on its contents.
• I want to float a div three to the right with an automatic width that also depends on its contents.
• I want the div with id two to be occupied by all the remaining space.

I did it with a table, but I want it with div s

 <table> <tr> <td id="one">AAAAAAAAAAAAAAAAAAAAA</td> <td id="two"><input style="width: 100%" type="search"></td> <td id="three">AAAAAA</td> </tr> </table> table { width: 100%; } #one width: auto; height: 20px; background-color: red; } #two{ width: 100%; height: 20px; background-color: orange; } #three { width: auto; height: 20px; background-color: green; } 

Answer 1

You can do it with Flexbox.

 #firstRow { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } #one { background-color: red; } #two { -webkit-flex: 1; -ms-flex: 1; flex: 1; } #three { background-color: green; } 

 <div id="firstRow"> <div id="one">AAA</div> <div id="two"><input style="width: 100%" type="search"></div> <div id="three">AAAAAA</div> </div> 

Answer 2

This is usually not the case, because, well, you have tables.

 .table { display:table; width:100%; border-spacing:2px; } .row { display:table-row; } .cell { display:table-cell; padding:1px; } .cell,td { white-space:nowrap; } 

 <div class="table"> <div class="row"> <div class="cell" style="background-color:#f88;">cell 1</div> <div class="cell" style="background-color:#8f8;width:100%;"><input style="width: 100%" type="search" placeholder="Search box"></div> <div class="cell" style="background-color:#88f;">cell 3</div> </div> </div> <table style="width:100%;"> <tr> <td style="background-color:#f88;">cell 1</td> <td style="background-color:#8f8;width:100%;"><input style="width: 100%" type="search" placeholder="Search box"></td> <td style="background-color:#88f;">cell 3</td> </tr> </table>