How can I get a button next to a dropdown using Tailwind?

Issue

I want to get this button to align next to the dropdown but couldn't figure out how since right now the button is below the dropdown

What I mean by dropdown and button not aligning

Here's what I have code-wise - any help is appreciated!

              <div class="items-center w-full">
                <%= form_for user_submission do |f| %>
                 <select id="user_submission_status" name="user_submission[status]" class=" mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
                    <option selected>Pending</option>
                    <option>Approve</option>
                    <option>Reject</option>
                  </select> 
                  <!-- <%= f.submit 'Update', class: 'text-white bg-primary hover:bg-primary-hover focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center me-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800' %> -->
                  <%= button_tag( :class => "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center me-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800") do %>
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg> 
                  <% end %>
                <% end %>
              </div>
            </td>

I've tried using flex and grid but still a noob so not quite sure how they interact here.

Solution

The <form> wrapping your select and button needs to be a flex container. You also need to move the classes from the wrapping div to your form, like so:

<%= form_for user_submission, html: { class: 'flex items-center w-full' } do |f| %>
  <!-- Form content -->
<% end %>

I also noticed you have mt-2 on your select. This will prevent the select and button from properly aligning vertically, so I suggest removing it. This is a working example.

Answered By - Rico