Вертикальные табы CSS для сайта

<div id="container">
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">вкладка 1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">вкладка 2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">вкладка 3</label>
<input id="tab4" type="radio" name="tabs">
  <label for="tab4">вкладка 4</label>
<section id="content1">
<p>Описание</p>
</section>  
<section id="content2">
<p>Описание</p>
</section>  
<section id="content3">
<p>Сайт ZORNET - Сегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. И это не обман, вам действительно не нужны средства для того чтобы создать себе любого вида сайт.  
Такая возможность имеется благодаря конструктору uCoz. Все что необходимо это пройти регистрацию на странице создания сайтов.  
</p>
</section>  
<section id="content4">
<p>Описание</p>
</section>  
</div>
</div>

*{box-sizing:border-box}
.tabs {
  width: 800px;
  padding: 0px;
  margin: 0 auto;
  position: relative;
  border: 1px solid #DEE8F2;
}
section {
  display: none;  
  padding: 15px;
  background: white;
  position: absolute;
  top: 0;
  left: 180px;
}
p {
  margin: 0;
}
input {
  display: none;
}
label {
  display: block;
  width: 180px;
  padding: 15px;
  color: #4F5966;
  background: #DEE8F2;
  cursor: pointer;
}
input:checked + label {
  color: #555;
  background: white;
}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {
  display: block;
}
section {
  animation: scale 0.7s ease-in-out;
}
@keyframes scale {
  0% {
  transform: scale(0.9);
  opacity: 0;
  }
  50% {
  transform: scale(1.005);
  opacity: 0.5;
  }
  100% {
  transform: scale(1);
  opacity: 1;
  }
}