How to position radiobutton under div? - php

Question

I am newbie in HTML and CSS. I need radiobutton which locates under div. Now there's a div and radiobutton to right of.
<div class="rates">
<? foreach ($rates as $rate) { ?>
<div class="rates-block" <? if ($rate->id % 4 != 1) { ?> style="margin-left: 48px;" <? } ?>>
<img src="/images/aukc_image/<?= $rate->img ?>" class="products-img rate-img" alt="product-1">
</div>
<input class="rate-radio" type="radio" name="radio1" value="<?= $rate->count ?>;<?= $rate->price ?>">
<? } ?>
</div>
There's my CSS for thats classes:
.rates {
margin-top: 19px;
}
.rates-block {
display: inline-block;
background-color: #FFFFFF;
width: 152px;
height: 154px;
border: 1px solid rgb(220, 220, 220);
margin-left: 101px;
}
.rate-radio {
display: inline-block;
}
Now I have this
But I need something like this

Answer 1

Try this:
.rates {
margin-top: 19px;
}
.product-wrapper{
display: inline-block;
background-color: #FFFFFF;
width: 152px;
margin-left: 50px;
}
.rates-block {
width: 100%;
height: 154px;
border: 1px solid rgb(220, 220, 220);
}
.rate-radio {
display: inline-block;
}
<div class="rates">
<div class="product-wrapper">
<div class="rates-block">
<img src="http://www.creativeprintpack.com/images/shoppingbag4.jpg" class="products-img rate-img" alt="product-1" style="width:100%">
</div>
<input class="rate-radio" type="radio" name="radio1" value="wewe">Rate 0</input>
</div>
<div class="product-wrapper">
<div class="rates-block">
<img src="http://www.creativeprintpack.com/images/shoppingbag4.jpg" class="products-img rate-img" alt="product-1" style="width:100%">
</div>
<input class="rate-radio" type="radio" name="radio1" value="wewe">Rate 1</input>
</div>
</div>
I have added a wrapper for each product/rate, which has the width set, the div containing the image is 100% width as the input aswell