jQuery - width/height behavior /w CSS-transitions

HTML

<div id="resizable-equipment-finn-no">  

<div class="spacebetween_contentbox">

<div id="fontPlusBtn">
<div id="textDiv">
<div class="headingtext-equipment-finn-no">Utstyr</div>

<div class="contentwholebox-equipment-finn-no">
<div class="startherewithcontent-equipment-finn-no">
<div class="content-equipment-finn-no">
<div class="content3-equipment-finn-no"> 
<div class="content1-equipment-finn-no">
</div>
</div>
<div class="content2-equipment-finn-no"> Sommerhjul</div>
</div>
</div>


</div>
</div>
</div>
</div>
</div>

CSS

.content1-equipment-finn-no {
font-size: 3px;
float:left;
width:6px;
height:6px;
background: #06BEFB;
font-family:arial;
height: 12px;
width: 12px;
margin-top: 7px;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
display: block; 
text-align: center;
}

.bigger .content1-equipment-finn-no {
    width: 20px; height: 20px;
}

.spacebetween_contentbox { 
float: left; 
display: inline; 
width: 500px; 
border: 1px solid #3dd333;
}

JavaScript

// "Normal" behvior
$('.spacebetween_contentbox').click( function() {
    $('.spacebetween_contentbox').toggleClass('bigger')
    width: 500;
});