title: Inline rails form field with button
body: <p>I have a rails form in which I can add more fields dynamically with the following javascript.</p>
  
  <pre><code>&lt;%= form_for(@service, url: services_create_path) do |form| %&gt;
  
    &lt;div class="form-group"&gt;
      &lt;%= form.text_field :name, autofocus: true, :class=&gt;"form-control", :placeholder=&gt;"Service name" %&gt;&lt;a href="javascript:;" id="addNewService" style="text-decoration: none;"&gt;Add more services&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div id="serviceSet"&gt;&lt;/div&gt;
  
    &lt;div class="form-group"&gt;
       &lt;%= form.submit :class=&gt;"btn btn-primary pull-right" %&gt;
    &lt;/div&gt;
  &lt;% end %&gt;
  
  
  &lt;script&gt;
  $(document).ready(function(){
      $('#addNewService').click(function(){
          $('div#serviceSet').append('&lt;div class ="new_service"&gt;&lt;input type="text" class="form-control" style="display: inline-block;" placeholder="enter more services"&gt;'+
  
              '&lt;button class="btn btn-default" style="display: inline-block;" type="button"&gt;remove&lt;/button&gt;&lt;/div&gt;' + '&lt;br&gt;'
  
          );
      });
  
      $("div#serviceSet").on('click', '.btn', function(){
          $(this).closest('.new_service').remove();
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Right now the <code>remove</code> button shows under the newly added form filed as you see:</p>
  
  <p><a href="https://i.stack.imgur.com/BXihq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BXihq.png" alt="enter image description here"></a></p>
  
  <p>How can I inline the form field along with the button?</p>