Tre div in fila 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> 

Ho tre div s.

• voglio galleggiare div con id one a sinistra. La larghezza di div dipende dal suo contenuto.
• Voglio fluttuare div tre a destra con larghezza automatica a seconda anche del suo contenuto.
• Desidero che lo div con ID due occupi tutto lo spazio rimanente.

l'ho fatto con tavolo ma voglio con 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

Si può fare questo con 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

Non c'è di solito un punto a questo perché, beh , hai i tavoli.

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