styling/Use flex auto to correctly align select boxes

Author: LewisYoul

app/views/modals/snippets/edit.html.erb

@@ -22,9 +22,9 @@
           <%= render partial: 'shared/form/toggle', locals: { form: f, field: :public, enabled_text: 'Private', disabled_text: 'Public', enabled: !@snippet.public, flip: true } %>
         </div>
 
-        <div class="flex flex-3">
-          <%= f.select :language_id, options_from_collection_for_select(@languages, :id, :name, @snippet.language_id), { prompt: 'Select language...' }, class: "block w-full pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm", data: { action: 'change->codemirror#updateMode' } %>
-          <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name, @folder.id), { prompt: 'Select folder...' }, { class: "ml-1 block w-full pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm" } %>
+        <div class="flex flex-auto justify-end">
+          <%= f.select :language_id, options_from_collection_for_select(@languages, :id, :name, @snippet.language_id), { prompt: 'Select language...' }, class: "block w-40 pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm", data: { action: 'change->codemirror#updateMode' } %>
+          <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name, @folder.id), { prompt: 'Select folder...' }, { class: "ml-1 block w-40 pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm" } %>
           <%= f.submit 'Update', class: "button--cta-primary ml-4" %>
         </div>
       </div>

app/views/modals/snippets/new.html.erb

@@ -13,13 +13,13 @@
     </div>
 
     <div class="flex mt-4">
-      <div class="flex flex-1 items-center">
+      <div class="flex flex-1 items-center mr-4">
         <%= render partial: 'shared/form/toggle', locals: { form: f, field: :public, enabled_text: 'Private', disabled_text: 'Public', enabled: false, flip: true } %>
       </div>
 
-      <div class="flex flex-3">
-        <%= f.select :language_id, options_from_collection_for_select(@languages, :id, :name, @javascript.id), { prompt: 'Select language...' }, class: "block w-full pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm", data: { action: 'change->codemirror#updateMode' } %>
-        <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name, params[:folder_id]), { prompt: 'Select folder...' }, { class: "ml-1 block w-full pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm" } %>
+      <div class="flex flex-auto justify-end">
+        <%= f.select :language_id, options_from_collection_for_select(@languages, :id, :name, @javascript.id), { prompt: 'Select language...' }, class: "block w-40 pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm", data: { action: 'change->codemirror#updateMode' } %>
+        <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name, params[:folder_id]), { prompt: 'Select folder...' }, { class: "ml-1 block w-40 pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm" } %>
         <%= f.submit 'CREATE', class: "button--cta-primary ml-4" %>
       </div>
     </div>