I'd like to set up a layout where an input element is next to a button, occupying the entire width of the container. Perhaps using a table would be the way to go.
In my HTML and CSS setup, I have the following:
.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>How can I apply CSS styling to make the table occupy the full width of the container, align the button to the right edge, and have the input element take up the remaining space to the left of the button (with a small gap between them)?