Responsive table via CSS

Question

I want to display an input element with a button to the right of it, such that the width of the input element plus a small gap plus the width of the button occupies the entire width of the container. This smells like a job for a table.

My basic CSS and HTML are like this:

.css-table {
  display: table;
}

.css-tr {
  display: table-row;
}

.css-td {
  display: table-cell;
}

<div class='css-table'>
  <div class='css-tr'>
    <div class='css-td'>
      <input />
    </div>
    <div class='css-td'>
      <button>Do it</button>
    </div>
  </div>
</div>

So, what CSS styling can I use so that the table is the full width of its container, with the button right-justified (against the right edge of the container) and the input element occupying the remaining space to the left of the button (with a small gap between the right edge of the input element and the left edge of the button)?

Answer 1

This only looks like a job for a table if you are still stuck in 1990. ;) If you want a modern, more up to date solution you should look into flexbox for one dimensional layouts. css-tricks has a good overview on flexbox, but there are also a ton of other resources on the web to get you started.

Edit:
Saw that you wanted a small gap between the right edge of the input element and the left edge of the button, added it to the snippet.

.css-row {
  display: flex;
}

.css-row input {
  flex-grow: 1;
  margin-right: 5px; /* to set the space for the button */
}

<div class='css-row'>
  <input />
  <button>Do it</button>
</div>

Answer 2

Hope these could work.

.css-table {
    display: table;
    width: 100%;
}

.css-tr {
    display: table-row;
}

.css-td {
    display: table-cell;
}

.css-td input{
    width: 100%;
}

<div class='css-table'>
    <div class='css-tr'>
        <div class='css-td'>
            <input type="text"/>
        </div>
        <div class='css-td'>
            <button>Do it</button>
        </div>
    </div>
</div>