How to specify css using jquery and overwrite css in css file

I have a three containers with different width. First container is taking 14% and second container is taking 26% and third container is taking 60%.Here is my code.

 <div class="mainContainer">
    <div class="container1">
       <div>
            <label>Label1</label></div>
        </div>
        <div ">
            <label>Label2</label></div>
        </div>
        <div  ng-click="minPageType()" title="Toggle Panel">
            <div  ng-if="togglePanel">
                <i class="fa fa-angle-double-left"></i>
            </div>
            <div ng-if="!togglePanel">
                <i class="fa fa-angle-double-right"></i>
            </div>
        </div>
    </div>
    <div class="container2">             
         // Container2 items
    </div>
    <div class="container3">
      //Container3 contents
   </div>
 </div>   

Here is  my css

.container1{
  position: absolute; 
  width:14%;   
}  
.container2 {
  width: 26%;
  left: 14%;  
  position:absolute;
}

.container3 {
  width: 60%;
  left: 40%;  
  position:absolute;
}

It is working. when the page open it shows three containers with proper width and when I click "fa fa-angle-double-left" icon the first container should have fixed with 56px and it should not overlap with other conatiners when I resize screen. I tried this jquery code.

 $scope.minPageType = function(){
        if($scope.pageTypeToggle === true){
            //max screen size          
           $(".container1").css("width", "14%");
           $(".container2").css("left", "14%");
            $(".container3").css("left", "40%");
            $(".container3").css("width", "60%");
            $scope.togglePanel = true;
        } else {
            //min screen size
            $(".container1").css("width", "56px");
            $(".container2").css("left", "56px");
            $(".container3").css("left", "29%");
            $(".container3").css("width", "71%");
            $scope.togglePanel = false;
        }
        $scope.pageTypeToggle = !$scope.pageTypeToggle;
    };

This code is not working. when I put this code and I tried resize the screen and the first container width is not fixed to 56px.the percentages mentioned in css is overwriting . In console it still showing the first conatiner width is 14%. How to not override css mentioned using jquery with percentages specified for width in css file?