Как установить первую ширину div, зависит от ширины текста, оставшаяся полная ширина будет назначаться второму div

Question

Я хочу разбить каждую строку на два столбца, а первая ширина div зависит от ширины текста, а оставшаяся полная ширина будет назначаться на второй div. Я приложил свой образец формы.

Answer 1

с помощью flex-box, вы можете сделать это следующим образом:

Working Fiddle Проверено на: Chrome, IE10, FF (что WHT СМЧ выглядит так грязно)

HTML:

<div class="Row"> 
     <div class="label"><label>short</label></div> 
     <div class="input"><input type="text" value="text goes here" /></div> 
    </div> 
    <div class="Row"> 
     <div class="label"><label>this is a long label</label></div> 
     <div class="input"><input type="text" value="text goes here" /></div> 
    </div> 

CSS:

* 
{ 
    padding: 0; 
    margin: 0; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.Row 
{ 
    border: 1px solid black; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    -webkit-flex-wrap: nowrap; 
    -ms-flex-wrap: nowrap; 
    flex-wrap: nowrap; 
    -webkit-box-pack: start; 
    -moz-box-pack: start; 
    -webkit-justify-content: flex-start; 
    -ms-flex-pack: start; 
    justify-content: flex-start; 
    -webkit-align-content: stretch; 
    -ms-flex-line-pack: stretch; 
    align-content: stretch; 
    -webkit-box-align: start; 
    -moz-box-align: start; 
    -webkit-align-items: flex-start; 
    -ms-flex-align: start; 
    align-items: flex-start; 
} 

    .Row > div 
    { 
     -webkit-align-self: auto; 
     -ms-flex-item-align: auto; 
     align-self: auto; 
    } 

.label 
{ 
    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    -webkit-flex: 0 1 auto; 
    -ms-flex: 0 1 auto; 
    flex: 0 1 auto; 
    /*apply padding if you want*/ 
} 

.input 
{ 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1 0 auto; 
    -ms-flex: 1 0 auto; 
    flex: 1 0 auto; 
    /*apply padding if you want*/ 
} 
.input input 
{ 
    width: 100%; 
} 

Answer 2

литий .div1 {поплавок: левый;} литий .div2 {* увеличение: 1; переполнение: скрытый;}