Из CMS приходит код формы ввода, фрагмент которого приведен ниже. Но получается так, что размеры колонок в таблице не соответствуют тому, что задано стилями.

Виной всему является форма, которая искажает таблицу. Если убрать её коды, то все работает превосходно.

В скриншотах видны оба варианта - и с формой, и без нее. Из сравнения скиншотов видно, что само наличие формы почему-то уменьшает размер левой ячейки. Кроме того, окно ввода не полностью заполняет правую ячейку.

Как сделать, чтобы ширина левой ячейки соответствовала заданному в стилях, и чтобы окно ввода занимало всю правую ячейку?

(При этом ширину в пикселях задавать нельзя, поскольку на странице резиновый дизайн.
Кроме того, предпочтительно манипулировать стилями, поскольку не все изменения HTML кода удастся реализовать).

 .comment {
    background: #F0EFEB;
    color: #333;
    margin: 1% 5% 2% 0;
    position: relative;
    padding: 2%;
    border-radius:15px;
    display:table;
    width:90%;
    border: red 1px solid;
}
 
.row {display:table-row;}
.caption {display:table-cell; background-color:#CF3; width:30%;}
.field {display:table-cell; background-color:#C6C; width:70%; } 
 

<!-- Это полный код из CMS -->
<p>С формой ввода</p>
<div class="comment">
<form action="/news/twelfth-news/" name="comment_form_00" method="post" >
    <div class="row">    
    <div class="caption">Имя</div>
    <div class="field"><input type="text" style="float: left; width:100%" name="author" value="" /></div>   
    </div>
</form>    
</div>

<!-- Если из кода убрать форму -->
<p>Коды формы ввода удалены</p>
<div class="comment">
    <div class="row">    
    <div class="caption">Имя</div>
    <div class="field"> Dva </div>   
    </div>   
</div>