В общем немного замаялся... Всяко разно пытался, всё кривовато получается.
Как соорудить такой "контрол", который будет много раз появляться на странице в самых разных местах?

|-------------|
| комментарий |
|-------------|
|   длинное   |
|   описание  |
|-------------|
|  F1  |[Поле]|
|-------------|

Где "комментарий", "длинное описание" — некий текст (могут разбиваться на несколько строк), горизонтально выровнены по центру контрола; "F1" — некая метка поля, должна быть в центре ячейки; "[Поле]" — обычный <input type="какой угодно" size="всякий разный">.

Вот наваял примерно так:

<table style="width:1px" cellpadding="0" cellspacing="0">
               <tr><td colspan="2" style="font-size:smaller;text-align:center;">Bla-bla-bla! Hurrrraaa! Foo bar baz. Blah. Huh?<br/>Suxx!</td></tr>
               <tr style="background-color:black;color:white;text-align:center;"><td colspan="2" style="font-size:smaller;">(A + B + C + D + E) <em>minus</em> (F + G + H + I)</td></tr>
               <tr style="background-color:black;color:white;">
                       <td style="width:3em;text-align:center;vertical-align:middle;">F1</td>
                       <td style="padding:1px;"><input style="padding:1px;border:none"/></td>
               </tr>
       </table>

Но выглядит как-то криво — бордюр вокруг input разной ширины и не работает width:3em для ячейки с меткой. И элемент блочный, хочется инлайновый.

Помогите, пожалуйста, до ума довести! А ещё лучше переписать на div-ы, и все стили в файл закинуть — т.к. таких контролов на странице будет много и хочется сократить объём.

Как вообще заставлять элементы занимать не всё доступное место, а только необходимое для определённого контента (в данном случае метка+input)?

Если имеет значение, то можно только для Firefox (XUL? ).