Three divs in a row CSS

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 divs.

• I want to float div with id one to the left. The width of div one will depend on its content.
• I want to float div three to the right with auto width depending also in its contents.
• I want the div with id two to be in the taking up all remaining space.

I have made it with table but I want it with divs

<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 this 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

There's usually not a point to this 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>