JSFiddle - React, Tailwind, and code Playground

HTML

<strong>Bottle Size</strong> 
<br/>
<label class="prodbutt">
    <input type="radio" class="size" value="10" name="size" required="required" />
    <img src="http://i.imgur.com/VTMVEab.png" class="productbutton" />
    <img src="http://i.imgur.com/k9JVWfr.png" class="productbutton_lower" />
</label>
<label class="prodbutt">
    <input type="radio" class="size" value="30" name="size" required="required" />
    <img src="http://i.imgur.com/KKsV0WU.png" class="productbutton" />
    <img src="http://i.imgur.com/40ZKKJd.png" class="productbutton_lower" />
</label>
<label class="prodbutt">
    <input type="radio" class="size" value="100" name="size" required="required" />
    <img src="http://i.imgur.com/sEeIGxt.png" class="productbutton" />
    <img src="http://i.imgur.com/JBKhYI2.png" class="productbutton_lower" />
</label>

CSS

label.prodbutt {
    position: relative;
}
img.productbutton {
    height: 25px;
}
img.productbutton_lower {
    height: 25px;
    visibility: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
}
label.prodbutt > input[type="radio"] {
    visibility: hidden;
    position: absolute;
}
label.prodbutt > input[type="radio"]:checked ~ img.productbutton {
    visibility: hidden;
}
label.prodbutt > input[type="radio"]:checked ~ img.productbutton_lower {
    visibility: visible;
}