How do I position these images to the right? - html

Question

I have a website where users can rate something from 1 to 5 stars and the results are displayed on a bar graph. The code is as follows:
.ratings-container {
/*background-color: orange;*/
font-family: tahoma;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
}
.ratings-container h3 {
padding-bottom: 20px;
}
.graph-container {
/* background-color: blue;*/
width: 66%;
}
.graph {
border-left: 2px solid black;
border-bottom: 2px solid black;
display: flex;
justify-content: space-around;
align-items: flex-end;
height: 300px;
width: 100%;
/*background-color: red;*/
}
.graph div {
width: 12%;
height: 1px;
background-color: black;
}
.counters {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}
.label-container {
width: 98%;
/*background-color: green;*/
}
#fivestar {
float: left;
/*display: inline;*/
}
#onestar {
float: right;
/*display: inline;*/
}
.star-container {
width: 25%;
/*background-color: blue;*/
margin-top: 100px;
font-size: 0;
}
.star {
width: 50px;
height: auto;
cursor: pointer;
transition: 0.3s;
}
#feedback-thanks {
display: none;
transition: 0.5s;
padding-top: 20px;
}
<div class="ratings-container">
<h3 style="font-family: Georgia" id="ratings-heading">RATE YOUR STAY</h3>
<div class="graph-container">
<div class="graph">
<div id="bar5"></div>
<div id="bar4"></div>
<div id="bar3"></div>
<div id="bar2"></div>
<div id="bar1"></div>
</div>
<div class="counters">
<h3 id="c5">0</h3>
<h3 id="c4">0</h3>
<h3 id="c3">0</h3>
<h3 id="c2">0</h3>
<h3 id="c1">0</h3>
</div>
<div class="label-container">
<h2 id="fivestar">5 star</h2>
<h2 id="onestar">1 star</h2>
</div>
</div>
<div class="star-container">
<img class="star" id="star1" src="./star.jpg">
<img class="star" id="star2" src="./star.jpg">
<img class="star" id="star3" src="./star.jpg">
<img class="star" id="star4" src="./star.jpg">
<img class="star" id="star5" src="./star.jpg">
</div>
<h3 id="feedback-thanks">Thanks for your feedback!</h3>
</div>
However I'm having trouble positioning the images at the bottom (which are stars). I would like them to be on the right hand side of the bar graph, not below it. I've tried taking them out of the 'ratings-container' div and making them inline elements but to no avail.

Answer 1

You can easily achieve that with a flexbox. I have documented the changes in the CSS code.
Vertical alignment of the flexbox items can be changed.
.ratings-container {
/*background-color: orange;*/
font-family: tahoma;
padding-top: 50px 0 50px 50px;
display: flex; /* Added */
flex-wrap: wrap; /* Added */
}
.ratings-container h3 {
padding-bottom: 20px;
width: 100%;
}
.graph-container {
/* background-color: blue;*/
width: 66%;
}
.graph {
border-left: 2px solid black;
border-bottom: 2px solid black;
display: flex;
justify-content: space-around;
align-items: flex-end;
height: 300px;
width: 100%;
/*background-color: red;*/
}
.graph div {
width: 12%;
height: 1px;
background-color: black;
}
.counters {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}
.label-container {
width: 98%;
/*background-color: green;*/
}
#fivestar {
float: left;
/*display: inline;*/
}
#onestar {
float: right;
/*display: inline;*/
}
.star-container {
width: 25%;
/*background-color: blue;*/
margin-top: 100px;
font-size: 0;
}
.star {
width: 50px;
height: auto;
cursor: pointer;
transition: 0.3s;
}
#feedback-thanks {
display: none;
transition: 0.5s;
padding-top: 20px;
}
<div class="ratings-container">
<h3 style="font-family: Georgia" id="ratings-heading">RATE YOUR STAY</h3>
<div class="graph-container">
<div class="graph">
<div id="bar5"></div>
<div id="bar4"></div>
<div id="bar3"></div>
<div id="bar2"></div>
<div id="bar1"></div>
</div>
<div class="counters">
<h3 id="c5">0</h3>
<h3 id="c4">0</h3>
<h3 id="c3">0</h3>
<h3 id="c2">0</h3>
<h3 id="c1">0</h3>
</div>
<div class="label-container">
<h2 id="fivestar">5 star</h2>
<h2 id="onestar">1 star</h2>
</div>
</div>
<div class="star-container">
<img class="star" id="star1" src="./star.jpg">
<img class="star" id="star2" src="./star.jpg">
<img class="star" id="star3" src="./star.jpg">
<img class="star" id="star4" src="./star.jpg">
<img class="star" id="star5" src="./star.jpg">
</div>
<h3 id="feedback-thanks">Thanks for your feedback!</h3>
</div>

Answer 2

try making the div containing stars Inline with previous div.