<form>
  <div class="col-md-8">
    <div class="panel panel-default">
      <div class="panel-heading">
        Personal Information
      </div>
      <div class="panel-body">
        <div class="form-group form-group-inline">
          <label class="label-block">First Name</Label>
          <input class="form-control form-control-inline form-control-medium" placeholder="First Name" />
        </div>
        <div class="form-group form-group-inline">
          <label class="label-block">MI</Label>
          <input class="form-control form-control-inline form-control-small" placeholder="MI" />
        </div>
        <div class="form-group form-group-inline">
          <label class="label-block">Last Name</label>
          <input class="form-control form-control-inline" placeholder="Last Name" />
        </div>
        
        <div class="form-group">
          <label class="label-block">Address</label>
          <input class="form-control form-control-inline form-control-large" />
          <input class="form-control form-control-large" />
        </div>

        
      </div>
    </div>
  </div>


  <div class="col-md-3">
    <div class="panel panel-primary">
      <div class="panel-heading">
        Payment Information
      </div>
      <div class="panel-body">

      </div>
    </div>
  </div>

</form>
.form-group-inline {
  display: inline-block;
}

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
    margin-left: 5px;
}

.form-control-small {
  min-width: 40px;
  max-width: 50px;
}

.form-control-medium {
  min-width: 200px;
  max-width: 250px;
}

.form-control-large {
  min-width: 400px;
  max-width: 500px;
}
.label-block {
  display: block;
  margin-left: 5px;
}

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

  1. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js