How to place buttons next to each other using css Bootstrap

Question

I need to places some buttons in the same line next to each other. Also, I like to put a text input with a button all on the same line.

Here is what I have done

<div class="well">

        <table class="I3WorkAroundTable">
            <tr>
                <td>
                    <div class="inlinebox">

                        <button type="button" class="btn btn-primary scripter_header_button" id="MasterRequestBreak">Request Break</button>

                        <button type="button" class="btn btn-primary scripter_header_button" id="MasterReturnToCampaign">Return to Campaign</button>

                        <button type="button" class="btn btn-primary scripter_header_button" id="MasterRequestLogoff">Logout off Campaign</button>

                        <button type="button" class="btn btn-primary scripter_header_button previewCallOption" id="MasterSkip">Skip this Call</button>

                        <button type="button" class="btn btn-primary scripter_header_button previewCallOption" id="MasterPlace">Place this Call</button>

                    </div>

                </td>
                <td class="I3WorkAroundTableRight">

                    <div class="inlinebox">

                        <div class="input-group">
                            <input type="text" class="form-control" id="MasterAlternativePhoneNumber" style="width: 120px;">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="button">Dial</button>
                            </span>
                        </div>

                    </div>

                    <div class="inlinebox">

                        <button type="button" class="btn btn-primary scripter_header_button" id="MasterTransferCall">Transfer Call</button>

                        <button type="button" class="btn btn-primary scripter_header_button " id="MasterAnsweringMachine">Answering Machine</button>

                        <button type="button" class="btn btn-primary scripter_header_button " id="MasterWrongNumber">Wrong Number</button>

                    </div>
                </td>
            </tr>
        </table>

    </div>

However, where I added the following code it, shifted the last 3 buttons to the vertical center of the other buttons.

        <div class="inlinebox">

            <div class="input-group">
                <input type="text" class="form-control" id="MasterAlternativePhoneNumber" style="width: 120px;">
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button">Dial</button>
                </span>
            </div>

        </div>

Here is my CSS code

.I3WorkAroundTable 
{
  width: 100%;
  padding: 0;
  margin: 0;
}

.I3WorkAroundTableRight
{
  min-width: 180px;
}

.inlinebox
{
  display: inline-block;
  *display: inline;
}

Here are some screenshots to show how they are not aligned

UPDATED This is how the page looks inside a page which forces IE8 comparability view

Answer 1

All the child elements contained inside your .inlinebox wrappers have varying line heights (some specified with relative units and others set with absolute pixel values) and are set to vertical-align: middle by default. As a quick fix specify the line-height and vertical-align properties on the .inlinebox class:

.I3WorkAroundTable {
  width: 100%;
  padding: 0;
  margin: 0;
}
.I3WorkAroundTableRight {
  min-width: 180px;
}
.inlinebox {
  display: inline-block;
  *display: inline;
  line-height: 1;
  vertical-align: top;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="well">
  <table class="I3WorkAroundTable">
    <tr>
      <td>
        <div class="inlinebox">
          <button type="button" class="btn btn-primary scripter_header_button" id="MasterRequestBreak">Request Break</button>
        </div>
      </td>
      <td class="I3WorkAroundTableRight">
        <div class="inlinebox">
          
          <div class="input-group" style="width: 160px">
            <input type="text" class="form-control" id="MasterAlternativePhoneNumber" >
            <span class="input-group-btn">
                <button class="btn btn-primary" type="button">Dial</button>
            </span>
          </div>
          </div>
        
        <div class="inlinebox">
          <button type="button" class="btn btn-primary scripter_header_button" id="MasterTransferCall">Transfer Call</button>
        </div>
      </td>
    </tr>
  </table>
</div>

I also moved the fixed width on your <input> element to the .input-group.

For better consistency across browsers, and since you're using Bootstrap already, you might consider using the Bootstrap grid for column based layouts instead of using <table>, or use block level elements with float:left instead of trying to align everything horizontally with display: inline-block.