apply class distinction to two flip buttons

apply class distinction to two flip buttons

It must be very simple, but I somehow can't progress with it. Pls help.

I want to make the rightmost switcher slightly wider

  2. <select name="flip-1" id="flip-1" data-role="slider" >
  3.             <option value="off">convex</option>
  4.             <option value="on"> concave</option>        </select>
  5.         

  7.         <select name="flip-2" id="flip-2" data-role="slider" class="bigga">
  8.             <option value="off">parallel</option>
  9.             <option value="on"> perpendicular</option>
  10.         </select>
     


  2. div.ui-slider-switch { width: 7em }
  3. /* this is the normal width, applies to more switchers*/
  4.  
  5. .bigga.ui-slider-switch { width: 9em }
  6. /*this one is for "classified" switcher which contains longer words