title: Make an element float to the right inside a div
body: <p>On my product page, there are a number of attributes depending on how many were added to that specific product. It can be from 1 up to 4. The attributes share a common fieldset class name and this is where it gets tricky for me. Basically I'm trying to position 2 of the fieldsets side by side and the rest below them (also side by side). However, I also want them separated and stick to their respective sides within the container. I've managed to make parts of what I said above happen but I have an issue with making the right fieldsets stick to the right side completely. Here's an image description:
  <a href="https://i.stack.imgur.com/S4kW5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S4kW5.png" alt="Demonstration"></a></p>
  
  <p>Here's the code so far:</p>
  
  <p><a href="https://jsfiddle.net/26za63sh/" rel="nofollow noreferrer">https://jsfiddle.net/26za63sh/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="product_attributes  clearfix"&gt;
      &lt;div id="attributes"&gt;
        &lt;div class="clearfix"&gt;&lt;/div&gt;
        &lt;fieldset class="attribute_fieldset"&gt;
          &lt;label class="attribute_label" for="group_2"&gt;Choose&lt;/label&gt;
          &lt;div class="attribute_list"&gt;
            &lt;select name="group_2" id="group_2" class="form-control attribute_select no-print"&gt;
              &lt;option value="81" selected="selected" title="Option #1"&gt;Option #1&lt;/option&gt;
              &lt;option value="150" title="Option #2"&gt;Option #2&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/fieldset&gt;
        &lt;fieldset class="attribute_fieldset"&gt;
          &lt;label class="attribute_label" for="group_6"&gt;Choose&lt;/label&gt;
          &lt;div class="attribute_list"&gt;
            &lt;select name="group_6" id="group_6" class="form-control attribute_select no-print"&gt;
              &lt;option value="31" selected="selected" title="Option #1"&gt;Option #1&lt;/option&gt;
              &lt;option value="56" title="Option #2"&gt;Option #2&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/fieldset&gt;
        &lt;fieldset class="attribute_fieldset"&gt;
          &lt;label class="attribute_label" for="group_5"&gt;Choose&lt;/label&gt;
          &lt;div class="attribute_list"&gt;
            &lt;select name="group_5" id="group_5" class="form-control attribute_select no-print"&gt;
              &lt;option value="80" selected="selected" title="Option #1"&gt;Option #1&lt;/option&gt;
              &lt;option value="151" title="Option #2"&gt;Option #2&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/fieldset&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
    width: 400px;
    height: 200px;
    background-color: gray;
    border: 1px solid #dddddd;
  }
  
  fieldset {
    padding: 0;
    margin: 0;
    border: 0;
  }
  
  #attributes .attribute_list {
    width: 90%;
  }
  
  #attributes fieldset {
    float: left;
    width: 50%;
    padding-bottom: 5px;
  }
  
  #attributes fieldset:last-child {
    float: left;
    padding-bottom: 0px;
  }
  </code></pre>
  
  <p>I understand that if I set .attribute_list's width to 100% it will accomplish what I'm trying to do but then the two fieldsets will have no space in the middle. If I instead set a fixed width instead of percentage, then I'll have issues in mobile/tablet view. Any suggestions?</p>