CSS - Horizontal Inline Alignment - css

Question

I'm developing a website (http://madworks.fr/suparis/fr/tuniques/14-syakati-tunic.html) and I'd like to align horizontally the "color" "size" "qtt" and "add to cart" button on one single line. I did my best to try modifying the display properties to inline or table-cell but that didn't work out.
Same for the social networks who should be aligned with the wishlist icon.
Can someone help me achieve that ?
Here's the source code :
<form id="buy_block" action="http://madworks.fr/suparis/fr/panier" method="post">
<!-- hidden datas -->
<p class="hidden">
<input type="hidden" name="token" value="58dbb67dab473715d793e92ac45eb820">
<input type="hidden" name="id_product" value="14" id="product_page_product_id">
<input type="hidden" name="add" value="1">
<input type="hidden" name="id_product_attribute" id="idCombination" value="68">
</p>
<div class="box-info-product">
<div class="content_prices clearfix">
<!-- prices -->
<div class="price_box clearfix">
<p class="our_price_display pull-left" itemprop="offers" itemscope="" itemtype="https://schema.org/Offer"><span id="our_price_display" itemprop="price" content="500">500,00 €</span><meta itemprop="priceCurrency" content="EUR"></p>
<p id="old_price" class=" hidden pull-left" style="display: none;"><span id="old_price_display" style="display: none;"></span></p>
</div> <!-- end prices -->
</div> <!-- end content_prices -->
<div class="product_attributes clearfix">
<!-- attributes -->
<div id="attributes">
<div class="clearfix"></div>
<fieldset class="attribute_fieldset">
<label class="attribute_label" for="group_1">Taille </label>
<div class="attribute_list">
<div class="selector" id="uniform-group_1" style="width: 96px;"><span style="width: 86px; -webkit-user-select: none;">S</span><select name="group_1" id="group_1" class="form-control attribute_select no-print">
<option value="1" selected="selected" title="S">S</option>
<option value="2" title="M">M</option>
</select></div>
</div> <!-- end attribute_list -->
</fieldset>
<fieldset class="attribute_fieldset">
<label class="attribute_label" for="group_3">Couleur </label>
<div class="attribute_list">
<div class="selector" id="uniform-group_3" style="width: 96px;"><span style="width: 86px; -webkit-user-select: none;">Noir</span><select name="group_3" id="group_3" class="form-control attribute_select no-print">
<option value="8" title="Blanc">Blanc</option>
<option value="11" selected="selected" title="Noir">Noir</option>
</select></div>
</div> <!-- end attribute_list -->
</fieldset>
</div> <!-- end attributes -->
<!-- availability or doesntExist -->
<div id="availability_statut" style="display: none;">
<span id="availability_value" class=" st-label-warning">This product is no longer in stock</span>
</div>
<div id="availability_date" style="display: none;">
<span id="availability_date_label">Availability date:</span>
<span id="availability_date_value"></span>
</div>
<!-- Out of stock hook -->
<div id="oosHook">
</div>
</div> <!-- end product_attributes -->
<div class="box-cart-bottom">
<!-- quantity wanted -->
<div class="qt_cart_box clearfix ">
<p id="quantity_wanted_p">
<span class="quantity_input_wrap clearfix">
-
<input type="text" min="1" name="qty" id="quantity_wanted" class="text" value="1">
+
</span>
</p>
<div id="add_to_cart_wrap" class="">
<p id="add_to_cart" class="buttons_bottom_block no-print">
<button type="submit" name="Submit" class="btn btn-medium btn_primary exclusive">
<span>Add to cart</span>
</button>
</p>
</div>
</div>
<!-- minimal quantity wanted -->
<p id="minimal_quantity_wanted_p" style="display: none;">
The minimum purchase order quantity for the product is <b id="minimal_quantity_label">1</b>
</p>
</div> <!-- end box-cart-bottom -->
</div> <!-- end box-info-product -->
</form>

Answer 1

Ideally you would reorder your HTML so that the 4 elements would be under the same parent element, like:
<div id="attributes">
<fieldset class="attribute_fieldset"></fieldset>
<fieldset class="attribute_fieldset"></fieldset>
<p id="quantity_wanted_p"></p>
<div id="add_to_cart_wrap"></div>
</div>
and they would have display: inline-block; on them, adjust any padding/spacing as necessary, etc.
But if that's not possible or too difficult, you could do it with this CSS:
.product_attributes, .attribute_fieldset, .box-cart-bottom {
display: inline-block;
}
You'll just be left with some padding and classes to adjust until you get it to one line. I would reference a CSS tutorial and look up things like padding, display, floats, etc. if you're having trouble.