In my rails app, I have a form structured like the following:
<p class='field'>
<div class = "form-group">
<div class = "col-sm-3 mobile-label" >
<%= form.label :loyalty%>
<%=image_tag "qun1.png" ,:style=>"width: 15px; display:inline-block", 'data-toggle'=>"modal", 'data-target'=>"#myModal1" %>
</div>
<div class="col-sm-9">
<%= form.text_field :coupon_code, :class => 'form-control col-sm-9' %>
<%= button_tag "Apply", class: 'btn btn-lg btn-success primary payment-code col-sm-3 ',id: 'apcode' %>
</div>
</div>
</p>
<p class='fild>
<div class = "form-group">
<div class = "col-sm-3 mobile-label" >
<%= form.label :coupon_code %>
</div>
<div class="col-sm-9">
<%= form.text_field :coupon_code, :class => 'form-control col-sm-9 ' %>
<%= button_tag "Apply", class: 'btn btn-lg btn-success primary payment-code col-sm-3 ',id: 'apcode' %>
</div>
</div>
</p>
Currently, there is no space between the label, text field, and button elements in both form groups.
When I apply line-height:30px; to my labels, it completely disrupts the layout. Anything less than that does not seem to have any effect.
You can find a somewhat similar example on this fiddle.
I would appreciate any help with this issue.