Добавить рамку, сохранив ширину

Есть две колонки 30%/70%:

<style>
  .left {
    float:left;
    width:30%;
    background: #aef;
  }

  .right {
    float:right;
    width:70%;
    background: tan;
  }
</style>

<div class="left">
 Левая<br>Колонка
</div>
<div class="right">
 Правая<br>Колонка<br>...
</div>

Добавьте к правой колонке рамку border-left и отступ padding-left.

Двухколоночная вёрстка при этом не должна сломаться!

Желательно не трогать свойство width ни слева ни справа и не создавать дополнительных элементов.

Подсказка

Используйте свойство box-sizing.

Решение

Да, можно – указываем box-sizing: border-box и добавляем свойства:

<style>
  .left {
    float:left;
    width:30%;
    background: #aef;
  }

  .right {
    float:right;
    width:70%;

    box-sizing: border-box;
    -moz-box-sizing: border-box;

    border-left: 2px solid green;
    padding-left: 10px;

    background: tan;
  }
</style>

<div class="left">
 Левая<br>Колонка
</div>
<div class="right">
 Правая<br>Колонка<br>...
</div>