I've been troubleshooting this issue for a couple of hours now. (My CSS skills are not the best)
Currently, I have two jQuery sliders with values. My goal is to position "Rooms: 0" and "Bathrooms: 0" right next to their respective slider bars.
.pricebox {
width: 400px;
margin:0px;
height:50px;
color: #FFFFFF;
font-size: 20px;
font-weight: 700;
}
.custom-slider {
margin-bottom:10px;
width: 70%;
float: right;
}
.values {
width: 30%;
text-align: left;
float: left;
}
#cleared{
clear: both;
}
<div class="pricebox">
<div id="slider-1" class="custom-slider"></div>
<span>Rooms: <div id="slider-1-value" class="values">0</div></span>
<br />
<div id="slider-2" class="custom-slider"></div>
<span>Bathrooms: <div id="slider-2-value" class="values">0</div></span>
</div>
<div id="cleared">