Is there any way of making a button with a data-inline="true" attribute line up with a text field?

The HTML produced for the button wraps a hidden button and a couple of <span> tags inside a <div>

I've made the text field narrower by adding a class that specifies the width, but all the padding and margins on the div messes up the alignment.

Generated code - all teh <div> and <span> tags are added by jQuery Mobile

2. <small>Quantity:</small>
   <input id="Quantity_535_569" class="smallQuantityField ui-input-text ui-body-f ui-corner-all ui-shadow-inset" type="text" maxlength="4" size="3" name="Quantity_535_569" value="1">
   < div  class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-f"  data-theme="f"  aria-disabled="false" >
   <span class="ui-btn-inner ui-btn-corner-all">

   <span class="ui-btn-text">Add to Cart</span>

   </span>

   <input id="AddToCartButton_535_569" class="AddToCartButton smallQuantityField ui-btn-hidden" type="button" data-theme="f" data-inline="true" value="Add to Cart" name="AddToCartButton_535_569" aria-disabled="false">

   </div>

It may be that I just have to create a custom class for the div, to override the settings that are causing the misalignment(with lots of !important CSS attributes to make sure the rules are used) but it is not even obvious as to how you add the class to the div - classes added to the button don't get added to the div when the jQuery adds the div.