Левый div с фиксированной шириной и правым div с шириной жидкости

Question

У меня была ситуация, когда I не может изменить HTML код и все должно быть выполнено с помощью CSS. **** На изображении ниже вы можете увидеть текст на с каждой стороны поля ввода. Мне нужно, чтобы весь текст был слева. Пролет, содержащий текст, имеет фиксированную ширину 30 пикселей. И мне нужно окно ввода, чтобы иметь ширину жидкости, чтобы она заполнила остальную часть контейнера. Я просто добавил цвет фона в первый контейнер для иллюстрации.

<div class="input-group input-prepend"> 
    <input name="monthlyBudget" class="form-control" placeholder="0" required="" data-bind="number, live: monthlyBudget" data-parsley-min="50" data-parsley-max="5000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorBudget" type="text"> 
    <span class="input-group-addon add-on">$</span> 
</div> 

Весь HTML для формы:

<form class="calculators-form-inputs no-submit" id="form-calculator-affordability" name="calculator-affordability" data-parsley-validate=""> 
     <div class="calculators-info-text"> 
      <h2>How Much Car Can I Afford?</h2> 
      <p>Great question. Fill in the boxes below to help with the answer and determine what price you can afford to pay for a car.</p> 
     </div> 
     <div class="calculators-form-field credit-amount"> 
      <div class="calculators-labels"> 
       <label>Your monthly budget     <i class="label-tooltip icon-info-sign glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip"></i> 
        <a class="calculators-helper-link" href="#" data-toggle="modal" data-target="#budgetCalModal">(Help me)</a> 
       </label> 
      </div> 
      <div class="calculators-sliders"> 
       <input type="range" value="0" min="50" max="5000" step="50" tabindex="-1" data-bind="value: monthlyBudget"> 
      </div> 
      <div class="calculators-inputs"> 
       <div class="input-group input-prepend"> 
        <span class="input-group-addon add-on">$</span> 
        <input name="monthlyBudget" class="form-control" type="text" placeholder="0" required="" data-bind="number, live: monthlyBudget" data-parsley-min="50" data-parsley-max="5000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorBudget"> 
       </div> 
      </div> 
      <div class="calculators-inputs-error" id="affordabilityCalErrorBudget"></div> 
     </div> 
     <div class="calculators-form-field credit-term"> 
      <div class="calculators-labels"> 
       <label>Loan term<i class="label-tooltip icon-info-sign glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip"></i> 
       </label> 
      </div> 
      <div class="calculators-sliders"> 
       <input type="range" value="0" min="12" max="84" step="12" tabindex="-1" data-bind="value: loanTerm"> 
      </div> 
      <div class="calculators-inputs"> 
       <div class="input-group input-append"> 
        <input name="loanTerm" class="form-control" type="text" placeholder="0" required="" data-bind="number, live: loanTerm" data-parsley-min="12" data-parsley-max="84" data-parsley-type="digits" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-pattern="^(12|24|36|48|60|72|84)$" data-parsley-errors-container="#affordabilityCalErrorTerm"> 
        <span class="input-group-addon add-on">mo</span> 
       </div> 
      </div> 
      <div class="calculators-inputs-error" id="affordabilityCalErrorTerm"></div> 
     </div> 
     <div class="calculators-form-field credit-apr"> 
      <div class="calculators-labels"> 
       <label>APR*<i class="label-tooltip icon-info-sign glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip"></i> 
       </label> 
      </div> 
      <div class="calculators-sliders"> 
       <input type="range" value="0" min="0" max="30" step="0.1" tabindex="-1" data-bind="value: interestRate"> 
      </div> 
      <div class="calculators-inputs"> 
       <div class="input-group input-append"> 
        <input name="interestRate" class="form-control" type="text" placeholder="0" required="" data-bind="number, live: interestRate" data-parsley-min="0" data-parsley-max="30" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-pattern="^[0-9]\d*(\.\d+)?$" data-parsley-maxlength="5" data-parsley-errors-container="#affordabilityCalErrorApr"> 
        <span class="input-group-addon add-on">%</span> 
       </div> 
      </div> 
      <div class="calculators-inputs-error" id="affordabilityCalErrorApr"></div> 
     </div> 
     <div class="calculators-form-field credit-reduction"> 
      <div class="calculators-labels"> 
       <label>Down payment<i class="label-tooltip icon-info-sign glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip"></i> 
       </label> 
      </div> 
      <div class="calculators-sliders"> 
       <input type="range" value="0" min="0" max="20000" step="100" tabindex="-1" data-bind="value: dPayment"> 
      </div> 
      <div class="calculators-inputs"> 
       <div class="input-group input-prepend"> 
        <span class="input-group-addon add-on">$</span> 
        <input name="downPayment" class="form-control" type="text" placeholder="0" data-bind="number, live: dPayment" data-parsley-min="0" data-parsley-max="20000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorDown"> 
       </div> 
      </div> 
      <div class="calculators-inputs-error" id="affordabilityCalErrorDown"></div> 
     </div> 
     <div class="calculators-actions"> 
      <div class="calculators-buttons"> 
       <input type="submit" value="Calculate"> 
      </div> 
     </div> 
    </form> 

Что я сейчас:

Это то, что мне нужно:

Answer 1

Оригинальный table и table-cell решение - http://jsfiddle.net/0jvnryhx/1/

Новое решение в связи с обновлениями от @ ChaniLastnamé http://jsfiddle.net/8pq6thr7/

.input-group { 
    margin-bottom: 20px; 
    position: relative; 
    overflow: hidden; 
    clear: both; 
} 

.add-on { 
    width: 30px; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

.form-control { 
    margin-left: 30px; 
} 

Затем вы можете вручную настроить width из входных коробки, чтобы сделать их пригодными контейнер (визуально полная ширина), все же нужно фиксировать ширину.

Answer 2

Должно быть достаточно простым, чтобы сделать только calc().

.form-control{ 
    width: calc(100% - 30px); 
} 

Вот CodePen

Answer 3

Can you support flexbox? Если это так, ваше решение:

.input-group { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-align-items: baseline; 
 
    align-items: baseline; 
 

 
    /* make it pretty */ 
 
    background: lightgrey; 
 
    /* whatever width you want */ 
 
    width: 300px; 
 
} 
 

 
.input-prepend span { 
 
    /* that width you said needed to be there */ 
 
    width: 30px; 
 
    /* align the $ against the input */ 
 
    text-align: end; 
 
} 
 

 
.input-prepend input { 
 
    /* use all the space */ 
 
    width: 100%; 
 
    
 
    /* make the input after the $ in layout */ 
 
    -webkit-order: 2; 
 
    order: 2; 
 
}

<div class="input-group input-prepend"> 
 
    <input name="monthlyBudget" class="form-control" placeholder="0" required="" data-bind="number, live: monthlyBudget" data-parsley-min="50" data-parsley-max="5000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorBudget" type="text"> 
 
    <span class="input-group-addon add-on">$</span> 
 
</div>

Если браузерами вам не поддерживают Flexbox. Есть несколько вариантов. Сначала я действительно надеюсь, что вы сможете отобразить диапазон перед входом, а не после того, как он находится в коде, который вы опубликовали. Вы также должны убедиться, что в вашем HTML-пространстве нет пробелов, так как это вызовет this issue. Если этот HTML-код поступает из готового вывода, у вас, вероятно, не будет этой проблемы.

Если вы можете сделать эти щипки в HTML это ваше решение:

.input-group { 
 
    /* make it pretty */ 
 
    background: lightgrey; 
 
    /* whatever width you want */ 
 
    width: 300px; 
 
} 
 

 
.input-prepend span { 
 
    /* can’t set width properly while inline */ 
 
    display: inline-block; 
 
    /* that width you said needed to be there */ 
 
    width: 30px; 
 
    /* align the $ against the input */ 
 
    text-align: end; 
 
} 
 

 
.input-prepend input { 
 
    /* use all the space minus the 30px from above */ 
 
    width: calc(100% - 30px); 
 
    /* change the way width is calculated */ 
 
    box-sizing: border-box; 
 
}

<div class="input-group input-prepend"><span class="input-group-addon add-on">$</span><input name="monthlyBudget" class="form-control" placeholder="0" required="" data-bind="number, live: monthlyBudget" data-parsley-min="50" data-parsley-max="5000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorBudget" type="text"></div>

Наконец, если вы действительно серьезно не трогать разметку И вы не можете поддерживать Flexbox.Вы можете сделать это, что немного Hacky, но в схеме вещей не попало:

.input-group { 
 
    /* make it pretty */ 
 
    background: lightgrey; 
 
    /* whatever width you want */ 
 
    width: 300px; 
 
    position: relative; 
 
} 
 

 
.input-group span { 
 
    /* can’t set width properly while inline */ 
 
    display: inline-block; 
 
    /* that width you said needed to be there */ 
 
    width: 30px; 
 
    /* align the $ against the input */ 
 
    text-align: end; 
 
    
 
    /* pull this out of flow */ 
 
    position: absolute; 
 
    /* vertically align with input */ 
 
    top: 2px; 
 
} 
 

 
.input-group input { 
 
    /* use all the space */ 
 
    width: 100%; 
 
    /* allow space for $ */ 
 
    margin-left: 34px; 
 
}

<div class="input-group input-prepend"> 
 
    <input name="monthlyBudget" class="form-control" placeholder="0" required="" data-bind="number, live: monthlyBudget" data-parsley-min="50" data-parsley-max="5000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorBudget" type="text"> 
 
    <span class="input-group-addon add-on">$</span> 
 
</div>

Надежда, что помогает!