How to stretch input with table-cell?

Question

C++ / C#

What is needed

<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;}

Can't stretch input without wrapping it in an extra div (
Can anyone suggest a solution without wrapping the input in an extra div?

Answer 1

You are trying to mix the logic of storing a list of topics with the logic of displaying them.
// add menu item here
and
public void click(object sender, EventArgs e)
{
// procedure for changing textbox1.text here
}
It shouldn't be in this class.
Form filling should occur in the form class using ready-made objects of the Lesson class.

Answer 2

Have you tried just doing

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

Answer 3

Use calc() to calculate the input width. Just don't forget the border and padding to take into account.