Make an element float to the right inside a div - html

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/