CSS Only Tabs

HTML

<div class="tabs">
    
   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Tab One</label>
       
       <div class="content">
           <p>Stuff for Tab One</p>
       </div> 
   </div>
    
   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Tab Two</label>
       
       <div class="content">
           <p>Stuff for Tab Two</p>
           
           <img src="http://placekitten.com/200/100">
       </div> 
   </div>
    
    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tab Three</label>
     
       <div class="content">
           <p>Stuff for Tab Three</p>
           as dasd asd asd as sad
           <p>Stuff for Tab Three</p>
           as dasd asd asd as sad
           <p>Stuff for Tab Three</p>
           as dasd asd asd as sad
           <p>Stuff for Tab Three</p>
           as dasd asd asd as sad
           <p>Stuff for Tab Three</p>
           as dasd asd asd as sad
           <p>Stuff for Tab Three</p>
           as dasd asd asd as sad
           <p>Stuff for Tab Three</p>
           as dasd asd asd as sad
           <p>Stuff for Tab Three</p>
           as dasd asd asd as sad
           <p>Stuff for Tab Three</p>
           as dasd asd asd as sad
           <p>Stuff for Tab Three</p>
           as dasd asd asd as sad
           <p>Stuff for Tab Three</p>
           as dasd asd asd as sad
           <p>Stuff for Tab Three</p>
           as dasd asd asd as sad
           <img src="http://placedog.com/200/100">
       </div> 
   </div>
    
</div>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra....

CSS

body {
   background: #999;  
   padding: 20px 40px; 
}

.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 35px 0 25px;
  background: white;
}
.tab {
  float: left;
   
}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
  top: -29px;
  -webkit-transition: background-color .17s linear;
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: -1px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
  -webkit-transition: opacity .6s linear;
  opacity: 0;
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
  opacity: 1;
}