Aligning buttons horizontally that are within divs
<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>