Make an element float to the right inside a div

Question

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:

Here's the code so far:

https://jsfiddle.net/26za63sh/

HTML:

<div class="container">
  <div class="product_attributes  clearfix">
    <div id="attributes">
      <div class="clearfix"></div>
      <fieldset class="attribute_fieldset">
        <label class="attribute_label" for="group_2">Choose</label>
        <div class="attribute_list">
          <select name="group_2" id="group_2" class="form-control attribute_select no-print">
            <option value="81" selected="selected" title="Option #1">Option #1</option>
            <option value="150" title="Option #2">Option #2</option>
          </select>
        </div>
      </fieldset>
      <fieldset class="attribute_fieldset">
        <label class="attribute_label" for="group_6">Choose</label>
        <div class="attribute_list">
          <select name="group_6" id="group_6" class="form-control attribute_select no-print">
            <option value="31" selected="selected" title="Option #1">Option #1</option>
            <option value="56" title="Option #2">Option #2</option>
          </select>
        </div>
      </fieldset>
      <fieldset class="attribute_fieldset">
        <label class="attribute_label" for="group_5">Choose</label>
        <div class="attribute_list">
          <select name="group_5" id="group_5" class="form-control attribute_select no-print">
            <option value="80" selected="selected" title="Option #1">Option #1</option>
            <option value="151" title="Option #2">Option #2</option>
          </select>
        </div>
      </fieldset>
    </div>
  </div>
</div>

CSS:

.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;
}

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?

Answer 1

Try this. If you want align items in line and float right.

.attribute-container{display:inline-block;}
.attribute_fieldset:nth-child(odd) .attribute-container{float:right;}
.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;
}

<div class="container">
  <div class="product_attributes  clearfix">
    <div id="attributes">
      <div class="clearfix"></div>
      <fieldset class="attribute_fieldset">
      <div class="attribute-container">
      
      
        <label class="attribute_label" for="group_2">Choose 1</label>
        <div class="attribute_list">
          <select name="group_2" id="group_2" class="form-control attribute_select no-print">
            <option value="81" selected="selected" title="Option #1">Option #1</option>
            <option value="150" title="Option #2">Option #2</option>
          </select>
        </div>
        </div>
      </fieldset>
      <fieldset class="attribute_fieldset">
      <div class="attribute-container">
      
      
        <label class="attribute_label" for="group_6">Choose 2</label>
        <div class="attribute_list">
          <select name="group_6" id="group_6" class="form-control attribute_select no-print">
            <option value="31" selected="selected" title="Option #1">Option #1</option>
            <option value="56" title="Option #2">Option #2</option>
          </select>
        </div>
        </div>
      </fieldset>
      <fieldset class="attribute_fieldset">
      <div class="attribute-container">
      
     
        <label class="attribute_label" for="group_5">Choose 3</label>
        <div class="attribute_list">
          <select name="group_5" id="group_5" class="form-control attribute_select no-print">
            <option value="80" selected="selected" title="Option #1">Option #1</option>
            <option value="151" title="Option #2">Option #2</option>
          </select>
        </div>
         </div>
      </fieldset>
    </div>
  </div>
</div>

Answer 2

The problem is the elements in fieldset all float to left.

Add this to float the inner elements of odd fieldsets to right:

#attributes fieldset:nth-child(odd) * {
  float: right;
}

JSFiddle: https://jsfiddle.net/er_han/Lprh9zqf/