JavaScriptでdiv要素の幅の初期値と、その後動的に変更できる仕組みを作成したい

現在以下のような書き方で、webページ上のdivの幅を、ボタンを押す事によって動的に変更しています。

しかしボタンを押すまでは、二つのdivが半々のサイズになってしまいます。
この二つのdiv要素がwebページを開いた段階では97%:3%になっており、
どの後はボタンを押す事によって処理が分かれるという動きにしたいのですが、
JavaScriptだけで、それを実現するにはどのように書けば良いのでしょうか？

$('#<id>').click(function {
var cnt = 0;
    if(cnt == 0){
        cnt = 1;
        $('#<div1のid>').closest(".dashboard-cell").css('width', '70%');
        $('#<div2のid>').closest(".dashboard-cell").css('width', '30%');
    } else {
        cnt = 0;
        $('#<div1のid>').closest(".dashboard-cell").css('width', '97%');
        $('#<div2のid>').closest(".dashboard-cell").css('width', '3%');
    }
});
$(window).trigger('resize');