CSS Only Tabs

HTML

<div class="slideshow">
    
   <div class="slide">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">1</label>
      
   </div>
    
   <div class="slide">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">2</label>
   </div>
    
    <div class="slide">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">3</label>
   </div>
    
</div>

SCSS

.slideshow {
  position: relative;
  min-height: 220px;
  /* This part sucks */
  clear: both;
}

.slide {
  float: left;
  label {
    padding: 3px 7px;
    margin-right: 4px;
    position: relative;
    left: 1px;
    top: 280px;
    -webkit-transition: background-color .17s linear;
    -moz-transition: background-color .17s linear;
    transition: background-color .17s linear;
  }
  [type=radio] {
    display: none;
  }
}

[type=radio]:checked ~ label {
  background: red;
  z-index: 2;
}