HTML Bootstrap - Display two buttons 50% of the Div's width

Question

I have a modal window that needs to display two buttons at the bottom, say Proceed and Cancel using Bootstrap's button for this.

I want these buttons to be side by side occupying the whole width of the div.

If I set the width of the buttons to be 50%, they are shown one on top of the other. Only when I set the width, say, 49% they are shown next to each other, but then they are not taking the whole width.

I've seen this many times, but can't figure out how to do it.

Here is a sample code of what I'm doing:

<div align="center">
    <button type="button" class="btn btn-warning" ng-click="Cancel()"  aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Cancel</font></button>
    <button type="button" class="btn btn-success" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Proceed</font></button>
</div>

Answer 1

Well, inspired by the received comments, I got a working solution (can't judge its elegance, but the result is what I was looking for):

<table style="width:100%">
    <tbody>
        <tr>
            <td class=" btn-warning" ng-click="Cancel()"  aria-haspopup="true" aria-expanded="false" style="width:50%;text-align:center;padding:10px 0 10px 0;cursor:pointer">
                <font size="6">Cancel</font>
            </td>
            <td class=" btn-success" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false" style="width:50%;text-align:center;padding:10px 0 10px 0;cursor:pointer">
                <font size="6">Proceed</font>
            </td>
        </tr>
    </tbody>
</table>

This is shown as two rectangles occupying the whole width, and correctly shrinking with the screen.