Снова о табличной верстке

Имеется вот такой код (http://test.aroks.com.ua/layout.html):

<table style="width: 20em;">
  <tbody>
    <tr>
      <td style="width: 100%;">
        <input style="width: 100%;">
      </td>
      <td style="width: 10px;">
        O
      </td>
    </tr>
  </tbody>
</table>

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

На слоях попробовал сделать так (http://test.aroks.com.ua/layout2.html):

<div style="width: 20em;">
  <div style="width: 10px; float: right;">O</div>
  <input style="width: 95%;">
</div>

Тут сложность в том, что ширина левой ячейки должна быть привязана к
ширине всей строки, но как это сделать -- непонятно. Если задать
ширину левой ячейки в процентах (как показано), то при изменении
ширины строки появляется зазор между ячейками, а при уменьшении
дизайн вообще может "сложиться". По сути, нужно что-то вроде

<input style="width: 100%-10px;">

В принципе, можно сделать так, что будет задаваться ширина левой
ячейки, но тогда ширина всей строки должна будет задаваться через нее
(типа "обтягивающего" контейнера).

Пока что есть два варианта -- верстать на таблицах или поддерживать
соотношение ширин левой ячейки и строки через JS при ресайзинге.
Пример растет из DOJO Toolkit, там сделано через таблицы, я при
создании виджетов пока на скорую руку повтыкал триггеров на JS. С
одной стороны, таблицы заведомо медленнее слоев, с другой -- не
думаю, что код JS быстрее нативной обработки таблиц. 

Как правильнее, да и по скорости что эффективнее?