Floating list issue - html

Question

I am creating a list with 5 star rating. I want to put stars in from of list title but my stars are not showing in front of list title.
.cont {
color: #eee;
margin: 0 auto;
max-width: 350px;
overflow: hidden;
padding: 0;
text-align: center;
width: 100%;
}
hr {
margin: 20px;
border: none;
border-bottom: thin solid rgba(255, 255, 255, .1);
}
div.stars {
width: 270px;
display: inline-block;
float: left;
}
input.star {
display: none;
}
label.star {
color: #444;
float: right;
font-size: 25px;
padding: 5px;
transition: all .2s;
}
input.star:checked ~ label.star:before {
content: '\f005';
color: #FD4;
transition: all .25s;
}
input.star-5:checked ~ label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952;
}
input.star-1:checked ~ label.star:before {
color: #F62;
}
label.star:hover {
transform: rotate(-15deg) scale(1.3);
}
label.star:before {
content: '\f006';
font-family: FontAwesome;
}
/* LIST #3 */
#list3 {
float: left;
}
#list3 ul {
list-style-image: url("../images/arrow.png");
color: #4B4B4B;
font-size: 18px;
margin-left: 25px;
}
#list3 ul li {
line-height: 30px;
}
<div id="list3">
<ul>
<li>Estimated time: 43min</li>
<li>Distance in miles: 14 miles</li>
<li>Review Rating:
<div class="cont">
<div class="stars">
<form action="">
<input class="star star-5" id="star-5-2" type="radio" name="star" />
<label class="star star-5" for="star-5-2"></label>
<input class="star star-4" id="star-4-2" type="radio" name="star" />
<label class="star star-4" for="star-4-2"></label>
<input class="star star-3" id="star-3-2" type="radio" name="star" />
<label class="star star-3" for="star-3-2"></label>
<input class="star star-2" id="star-2-2" type="radio" name="star" />
<label class="star star-2" for="star-2-2"></label>
<input class="star star-1" id="star-1-2" type="radio" name="star" />
<label class="star star-1" for="star-1-2"></label>
</form>
</div>
</div>
</li>
</ul>
</div>

Answer 1

Try this: http://codepen.io/g1un/pen/KgvrwZ
.cont {
color: #eee;
margin: 0 auto;
max-width: 350px;
overflow: hidden;
padding: 0;
text-align: center;
/* width: 100%; */
display: inline-block;
vertical-align: top;
}
div.stars {
/* width: 270px; */
display: inline-block;
/* float: left; */
}
Your main mistake causing appearing of your rating icons below the title is that rating block has display: block; property by default as a div and you didn't change it.
It is also no need in width: 100% that causes element jumping to another row to fit this property.