Problema Tabs efect cu CSS - redimensionare dupa Content

[General]

Tab ar trebui sa isi modifice dimensiunile in depenta de ce text este in el insa el nu se modifica, puteti sa ma ajutati?
content este locul unde stau textele si acolo i-am pus height: 100% dar nu merge.
Asta e codul html:

Cod: Selectaţi tot

<div class="tabs">
   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Descriere</label>
       <div class="content">
           <p align="justify">Un text<br></p>
       </div> 
   </div>
    
   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Test1</label>
       <div class="content">
           <p align="justify">
     Un text oarecare
</p>
       </div> 
   </div>
    
    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Test2</label>
       <div class="content">
           <p align="justify">
   Un text oarecare
 </div>     
		   </p>
   </div>
   
   <div class="tab">
       <input type="radio" id="tab-4" name="tab-group-1">
       <label for="tab-4">Test3</label>
       <div class="content">
           <p>Text</p>
       </div> 
   </div>
   
    <div class="tab">
       <input type="radio" id="tab-5" name="tab-group-1">
       <label for="tab-5">Test4</label>
       <div class="content">
           <p align="justify">
                    Text
		   </p>
       </div> 
   </div>  
</div>

Acesta e codul css:

Cod: Selectaţi tot

.tabs {
  position: relative;
  min-height: 400px; 
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  margin-left: -1px;
  position: relative;
  left: 1px;
}
.tab [type=radio] {
  display: none;
}
.content {
  position: absolute;
  height: 100%;
  top: 28px;
  left: 0;
  background: #f8f8f8;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

Desi poate nu m-am exprimat eu corect, eu din toata chestia asta, vreau sa primesc ceva de genul cum aici (numai ca eu nu folosesc aici jquery ci numai css):
jqueryui.com/tabs/

Salut
Incearca fara proprietatile "height" si "bottom" la .content.
Adica asa:

Cod: Selectaţi tot

.content {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  background: #f8f8f8;
  border: 1px solid #ccc;
  padding: 20px;
}

- Edit: Aici -> Tabs effect with CSS e un exemplu functional.