Vertically fill div

by captncanary

HTML

<div class="calc-wrap clear">
  <h2>Title</h2>

  <div class="calc-content clear">
    <div class="calc-form">
      <form id="cost_calculator">
        <fieldset>
          <legend>
            <h3>Find out how much your stuff costs you</h3>
          </legend>
          <ol>
            <li class="one">
              <label for="cost_of_pack">quantity</label>
              <span class="pound-label">£</span>
              <input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
            </li>
            <li class="two">
              <label for="quantity_smoked">How many per day?</label>
              <input type="number" id="quantity_smoked" name="quantity_smoked" value="0">
            </li>
          </ol>
        </fieldset>
      </form>
    </div>
    <div class="calc-save">
      <div class="calc-results-content clear">
        <h3>Results</h3>
        <div class="calc-results">
          <div>
            <p id="weekly_cost">£<span>0.00</span> per week</p>
            <p id="monthly_cost">£<span>0.00</span> per month</p>
            <p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
          </div>
        </div>
        <div class="calc-quitnow">
          <p>Well done</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.calc-content {
  display: inline-block;
  border: 3px solid blue;
  width: 100%;
  border-color: #87B7CD;
}

.calc-form,
.calc-save {
  height:100%;
  border: 1px solid red;
  float: left;
}

.calc-form {
  width: 60%;
}

.calc-save {
  width: 39%;
  background-color: #87B7CD;
}

.calc-results {
  float: left;
  width: 60%;
}