Custom radio buttons to show/hide content - html

Question

I am trying to build a interactive email content block that would show or hide content based on the selection. It worked before I tried to customize the label. It stopped working after I wrapped the input and label inside a div. I think it could be throwing my selectors off but I am not sure how remedy the problem.
.custom-radios input[type="radio"] + label span img {
opacity: 0;
transition: all 0.3s ease;
}
.custom-radios input[type="radio"]#red + label span {
background-color: red;
}
.custom-radios input[type="radio"]#blue + label span {
background-color: blue;
}
.custom-radios input[type="radio"]#green + label span {
background-color: green;
}
.custom-radios input[type="radio"]#orange + label span {
background-color: orange;
}
.custom-radios input[type="radio"]:checked + label span img {
opacity: 1;
}
#red{
display: none
}
#blue{
display: none
}
#green{
display: none
}
#orange{
display: none
}
input[type="red"]:checked ~ #red {
display: block
}
input[value="blue"]:checked ~ #blue {
display: block;
}
input[value="green"]:checked ~ #green {
display: block;
}
input[value="orange"]:checked ~ #orange {
display: block;
}
<div class="custom-radios">
<div>
<input type="radio" id="red" name="color" value="red">
<label for="red">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<input type="radio" id="green" name="color" value="green">
<label for="green">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<input type="radio" id="orange" name="color" value="orange">
<label for="orange">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;"> </div>
<p style="margin:0;" id="red">
<img src="https://via.placeholder.com/580x200/FF0000/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="blue">
<img src="https://via.placeholder.com/580x200/0000FF/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="green">
<img src="https://via.placeholder.com/580x200/00FF00/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="orange">
<img src="https://via.placeholder.com/580x200/FFA500/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;"> </div>
</div>

Answer 1

I think selectors may be a weak point for you, again, I encourage you to check the CSS Selectors Reference from w3school.
Anyways, I made a simplified version, as similar as I could to you current structure, so you can see it working.
.hidden_input {
display: none;
}
#red_input+label>span {
background-color: red;
}
#blue_input+label>span {
background-color: blue;
}
label>span>img {
opacity: 0;
transition: all 0.3s ease;
}
.hidden_input:checked+label>span>img {
opacity: 1;
}
#red_content,
#blue_content {
display: none;
}
#red_input:checked~#red_content,
#blue_input:checked~#blue_content {
display: block;
}
<div class="custom-radios">
<input type="radio" id="red_input" class="hidden_input" name="color" value="red">
<label for="red_input">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"/>
</span>
</label>
<input type="radio" id="blue_input" class="hidden_input" name="color" value="blue">
<label for="blue_input">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"/>
</span>
</label>
<div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;"> </div>
<p style="margin:0;" id="red_content">
<img src="https://via.placeholder.com/580x200/FF0000/FFFFFF" width="580" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="blue_content">
<img src="https://via.placeholder.com/580x200/0000FF/FFFFFF" width="580" style="width:100%;height:auto;max-width:580px;" />
</p>
</div>
You can also play and place elements wherever you want in your HTML code, and then set their position with grid (it's just another option).