Как растянуть input при table-cell?

Question

[Лариса]

Что требуется

<div class="group">
        <input type="text" class="control">
        <span class="addon">@</span>
</div>

.group {
       width: 100%;
       display: table;
       table-layout: fixed;}
.addon,
.control {
        display: table-cell;
        padding: 10px; }
.control {
        background-color: #eee;
        border: 1px solid red;}
.addon {
         width:30px;
         background-color: #cccccc;}

Не получается растянуть input, без обертывания его в дополнительный див (

Может кто подскажет решение без обертки input в дополнительный div?

Answer 1

[Артур Карапетян]

Вы не пробовали просто сделать

.control {
        background-color: #eee;
        width: 100%;
        border: 1px solid red;}

Comments

[Лариса]

Вы уверены в своем решении?
или Вы предполагаете, не протестировав Ваш ответ?

[Артур Карапетян]

Предполагаю, но почему бы вам не попробовать?

[Лариса]

Артур: потому что это не решение ни разу
настолько очевидно поставить ширину 100%

Если бы все было так просто, тема бы не была создана на форуме)

[Артур Карапетян]

А почему бы не сделать это ::after -ом?!

[Лариса]

Артур: Если есть решение, то покажи рабочий код
иконка обязательно должна быть в span

Answer 2

[Андрей Федоров]

Используйте calc() для расчета ширины input. Только не забудьте border и padding учесть.