Left div with fixed width and right div with fluid width - html

Question

I have a situation where I cannot change the HTML and everything has to be done with CSS.**** In the image below you can see there are text on either side of the input box. I need to have all text to be on left side. The span containing the text has a fixed width of 30 pixels. And I need the input box to have a fluid width so that it will fill the rest of the container. I just added a background color to the first container for illustration purposes.
<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>
Entire HTML for the form:
<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>
What I have now:
This is what I need:

Answer 1

The original table and table-cell solution - http://jsfiddle.net/0jvnryhx/1/
New solution due to the updates from #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;
}
Then you can manually adjust the width of the input the boxes to make them fit the container (visually full width), everything needs to be fixed width though.

Answer 2

Should be simple enough to do with just a calc().
.form-control{
width: calc(100% - 30px);
}
Here is a CodePen

Answer 3

Can you support flexbox? If so this is your solution:
.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>
If the browsers you need do not support flexbox. There are a few options. First I really really hope you’re able to render the span before the input instead of after the way it is in the code you posted. You also need to ensure there are no spaces in your HTML as that will cause this issue. If this HTML comes from a pre-rendered output you probably won’t have that issue.
If you can make those tweaks to the HTML this is your solution:
.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>
Finally if you really seriously can’t touch your markup AND you can’t support flexbox. You can do this which is a bit hacky but in the scheme of things not horrible:
.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>
Hope that helps!