dynamic div border based on radio button selection

Question

I am having difficulty with this one. I am trying to change the border around the entire div (e.g. #option1) instead of just the text. As you can see, when you click each radio button it changes the border around the option text, but not the entire div. Any suggestions?

JSFIDDLE: https://jsfiddle.net/1hdv2n3h/1/

    <div id="wine_club_selection">

<div id="option1">
<p><input type="radio" name="club_type" checked="checked" value="option 1"><br/>
<span class="bold_text">Option 1</span><br/>
3 Bottles<br/>
15% Discount<br/></p></div>

<div id="option2">
<p><input type="radio" name="club_type" value="option 2" ><br />
<span class="bold_text">Option 2</span><br />
6 Bottles<br />
20% Discount<br/>
</p></div>

<div id="option3">
<p><input type="radio" name="club_type" value="option 3"><br>
<span class="bold_text">Option 3</span><br />
12 Bottles<br />
25% Discount<br />
</p></div>

</div>


/*  CSS: */
#wine_club_selection {
    height:200px;
    width:800px;
}

#option1 {
float:left;
width:266px;
}

#option1 p {
    text-align:center;
}

#option2 {
float:left;
width:266px;
}

#option2 p {
    text-align:center;
}

#option3 {
float:right;
width:266px;
text-align: center;
}

#option3 p {
    text-align:center;
}


.bold_text {
    font-weight:800;
}

.billing_table input {
font-size:18px;
color:#620101;
}

#option1 input[type="radio"]:checked ~ *{ 
        border: thin solid #F00;!important;
}

#option2 input[type="radio"]:checked ~ *{ 
        border: thin solid #F00;!important;
}

#option3 input[type="radio"]:checked ~ *{ 
        border: thin solid #F00;!important;
}

Answer 1

I'm a bit anal-retentive about good-quality HTML, so I tidied yours up a little to make it more semantically-correct.

You can't use CSS to select the "parent" of an element -- only "sibling" elements that come after it -- so you have to sort-of fake it.

.options {
  height:200px;
  width:800px;
  text-align:center;
}

.options li{
  display:inline-block;
  width:30%;
}

.options p{
  margin:0;
}

.options header p{
  font-weight:bold;
 }

.options li div{
  padding-top:1em;
}

.options li input{
  position:relative;
  top:2em;
}

.options li input:checked+div{
  border:1px solid #f00;
}

<ul class="options">
  <li>
    <input type="radio" name="option" checked />
    <div>
      <header><p>Option 1</p></header>
      <p>3 bottles</p>
      <p>15% discount</p>
    </div>
  </li>
  <li>
    <input type="radio" name="option" />
    <div>
      <header><p>Option 2</p></header>
      <p>6 bottles</p>
      <p>20% discount</p>
    </div>
  </li>
  <li>
    <input type="radio" name="option" />
    <div>
      <header><p>Option 3</p></header>
      <p>12 bottles</p>
      <p>25% discount</p>
    </div>
  </li>
</ul>