How to position radiobutton under div?

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