title: dynamic div border based on radio button selection
body: <p>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?</p>
  
  <p>JSFIDDLE:   <a href="https://jsfiddle.net/1hdv2n3h/1/" rel="nofollow">https://jsfiddle.net/1hdv2n3h/1/</a></p>
  
  <pre><code>    &lt;div id="wine_club_selection"&gt;
  
  &lt;div id="option1"&gt;
  &lt;p&gt;&lt;input type="radio" name="club_type" checked="checked" value="option 1"&gt;&lt;br/&gt;
  &lt;span class="bold_text"&gt;Option 1&lt;/span&gt;&lt;br/&gt;
  3 Bottles&lt;br/&gt;
  15% Discount&lt;br/&gt;&lt;/p&gt;&lt;/div&gt;
  
  &lt;div id="option2"&gt;
  &lt;p&gt;&lt;input type="radio" name="club_type" value="option 2" &gt;&lt;br /&gt;
  &lt;span class="bold_text"&gt;Option 2&lt;/span&gt;&lt;br /&gt;
  6 Bottles&lt;br /&gt;
  20% Discount&lt;br/&gt;
  &lt;/p&gt;&lt;/div&gt;
  
  &lt;div id="option3"&gt;
  &lt;p&gt;&lt;input type="radio" name="club_type" value="option 3"&gt;&lt;br&gt;
  &lt;span class="bold_text"&gt;Option 3&lt;/span&gt;&lt;br /&gt;
  12 Bottles&lt;br /&gt;
  25% Discount&lt;br /&gt;
  &lt;/p&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  
  /*  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;
  }
  </code></pre>