div><div class="container">
<div class="myimage"><img src="https://image.ibb.co/kXJYHR/pexels_photo_167699.jpg" width="180" height="180"></div>
<div class="mystars">
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
</div>
<div class="myobject">
<div class="object_name">Restaurant that has somegthing great</div>
<div class="object_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
<div class="price">$6.00</div>
<div class="distance">2 km</div>
</div>
</div>
.container {
background-color: tomato;
width: 40%;
margin: 0 auto;
display:flex;
flex-direction: row;
}
.mystars {
color: white;
font-size: 2em;
display: flex;
flex-direction: column;
background-color: green;
}
.myobject {
background-color: blue;
display: flex;
flex-direction: column;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.