title: Aligning buttons horizontally that are within divs
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.button {
      display:block;
      text-align:center;
      margin: auto;
      padding-bottom: inherit;
      vertical-align: top;
  }
  
  .input-div {
    vertical-align: top;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-group  field-plan"&gt;
      &lt;label for="plan" class="col-sm-3 control-label"&gt;
       Current Plan
      &lt;/label&gt;
      &lt;div class="input-div col-sm-9"&gt;
       &lt;p class="form-control-static control-field-plan"&gt;
          20 alerts per day &lt;br&gt; 
                         0 out of 20 used
                        &lt;span class="button"&gt;
                          &lt;button class="change-button btn btn-success"&gt;
                            Change Plan
                          &lt;/button&gt;
                        &lt;/span&gt;
       &lt;/p&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="form-group payment_method field-payment_method"&gt;
      &lt;label for="payment_method" class="col-sm-3 control-label"&gt;
       Payment
      &lt;/label&gt;
      &lt;div class="input-div col-sm-9"&gt;
       &lt;p class="form-control-static control-field-payment_method"&gt;
                        Visa 4242 &lt;br&gt;
                        Next payment due: 2016-15-05
                        &lt;span class="button"&gt;
                          &lt;button class="update-card btn btn-success"&gt;
                            Update Card
                          &lt;/button&gt;
                        &lt;/span&gt;
       &lt;/p&gt;
      &lt;/div&gt;
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have the following HTML code:</p>
  
  <pre><code>&lt;div class="form-group  field-plan"&gt;
      &lt;label for="plan" class="col-sm-3 control-label"&gt;
          Current Plan
      &lt;/label&gt;
      &lt;div class="input-div col-sm-9"&gt;
          &lt;p class="form-control-static control-field-plan"&gt;
              {{get_current_plan current_customer.plan}}
              &lt;button class="change-button btn btn-success"&gt;
                  Change Plan
              &lt;/button&gt;
  
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group payment_method field-payment_method"&gt;
      &lt;label for="payment_method" class="col-sm-3 control-label"&gt;
          Payment
      &lt;/label&gt;
      &lt;div class="input-div col-sm-9"&gt;
          &lt;p class="form-control-static control-field-payment_method"&gt;
              {{get_payment_method current_customer.payment_method}}
              &lt;button class="update-card btn btn-success"&gt;
                  Update Card
              &lt;/button&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My app displays text in the two {{ ... }} that are before the buttons.
  The amount of text varies and can be over several lines sometimes.</p>
  
  <p>The location of the buttons seem to be determined by the last line of the text, so it varies greatly where the buttons are placed, and it doesn't look good.</p>
  
  <p>I know very little about css, but have been unable to place the buttons correctly adjacent to the first line of text in each div.</p>
  
  <p>Can anyone guide me as to css for this?</p>