How do I fill a row entirely with a input field and button side by side?

Question

css file

.columnForm {
   display: inline-block;
}

html file

<div class="row" style="height:100px;">
        <div class="col-md-9 col-md-offset-1">          
            <form class="columnForm" name="columnForm">
                <label style="font-size:12px; text-align:center;">Add a new column</label>
                <div>
                    <div class="input-group">
                        <input id="newcolumn"
                               name="newcolumn"
                               type="text"
                               ng-model="newcolumn"
                               class="form-control input-lg"
                               placeholder="enter a column name"
                               style="font-size:12px; float:left;" />
                        <button id="addButton"
                                name="addButton"
                                style="text-align:center; float:right"
                                ng-click="addColumn()"
                                class="btn btn-info form-control input-lg">
                            Add
                        </button>
                    </div>
                </div>
            </form>    
        </div>
    </div>

I want them to cover an entire row side by side but this code above puts both of them on the left hand side of the screen one on the top of the other.

Answer 1

It's enough using input-group DIV as flex container and making the childs grow to fill all the space

.input-group{
  display: flex
}

.input-group > #newcolumn {
  flex-grow: 2
}

.input-group > #addButton {
  flex-grow: 1
}

<div class="row" style="height:100px;">
    <div class="col-md-9 col-md-offset-1">          
        <form class="columnForm" name="columnForm">
            <label style="font-size:12px; text-align:center;">Add a new column</label>
            <div>
                <div class="input-group">
                    <input id="newcolumn"
                           name="newcolumn"
                           type="text"
                           ng-model="newcolumn"
                           class="form-control input-lg"
                           placeholder="enter a column name"
                           style="font-size:12px; float:left;" />
                    <button id="addButton"
                            name="addButton"
                            style="text-align:center; float:right"
                            ng-click="addColumn()"
                            class="btn btn-info form-control input-lg">
                        Add
                    </button>
                </div>
            </div>
        </form>    
    </div>
</div>

UPDATE:

If you want that any of the component take more space than the other, change the flex-grow of any of them

Info about how to use flexbox:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/