CodePen

HTML

            
              <div class="grid grid-pad">
  <h1>Enter a code snippet</h1>
   <div class="col-1-2">
     <div class="module">
				<form>
          
          <label>Snippet Name:</label>
          <input type="text">
          
          <label>Snippet Author:</label>
          <input type="text">
          
          <label>Snippet Syntax:</label>
          <input type="text">
          
          <label>Links &amp; Resources:</label>
          <input type="text">
          
          <label>Code Description:</label>
          <input type="text">
          
        </form>
     </div>
   </div>
   <div class="col-1-2">
     <div class="module">
       <textarea></textarea>
     </div>
   </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline:0;
}

body {
  background:rgba(0,0,0,0.64);
}

/* ::::::::::::: Setting up grid :::::::::::: */

.grid {
  background:rgba(255,255,255,0.6);
  margin:20px auto 0;
  width:80%;
  position:relative;
  border-radius:4px;
}
*:after {
  content: "";
  display: table;
  clear: both;
}
.col-1-2 {
  float: left;
  position:relative;
  padding-right: 20px;
  width: 50%;
}

.col-1-2:last-of-type {
  padding-right: 0;
}
.grid-pad {
  padding: 20px 0 20px 20px;
}
.grid-pad [class*='col-']:last-of-type {
  padding-right: 20px;
}
.module {
  padding: 20px;
  background: #eee;
  border-radius:4px;
}

/* ::::::::::::: Setting up form :::::::::::: */

label {
  display:inline-block;
  width:30%;
  height:30px;
  float:left;
}

input[type='text'] {
  width:70%;
  float:left;
  height:30px;
  margin-bottom:15px;
  border-radius:3px;
  border:1px solid #aaa;
}
input[type='text']:last-of-type {
  margin:0;
}
textarea {
  width:100%;
  height:208px;
  position:relative;
  border-radius:3px;
  border:1px solid #aaa;
  font:lighter normal 13px/1.2 'Inconsolata';
}


.col-expand {
  width:80%;
  -webkit-transition:width 300ms ease-in-out;
}

.col-deflate {
  width:20%;
  -webkit-transition:width 300ms ease-in-out;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var col_1 = $('.col-1-2:eq(0)'),
    col_2 = $('.col-1-2:eq(1)');

$.deflate = function(elem) {
	return elem.removeClass('col-expand').addClass('col-deflate');
};

$.expand = function(elem) {
  return elem.removeClass('col-deflate').addClass('col-expand');
};

col_1.on('click', function() {
  if ( col_1.width() <= col_2.width() ) {
    $.deflate(col_2);
    $.expand(col_1);
  } else {
    return false;
  }
});

col_2.on('click', function() {
  if ( col_2.width() <= col_1.width() ) {
    $.deflate(col_1);
    $.expand(col_2);
  } else {
    return false;
  }
});


/* ::::::::::: previous code :::::::::::::
$('.col-1-2:eq(0)').on('click', function () {
    if ($('.right').width() >= $('.left').width()) {
        $('.right').stop().animate({
            'width': '20%'
        }, 300, function () {
            $('.left').stop().animate({
                'width': '80%'
            }, 200);
            $('textarea').animate({
                'height': '208px'
            }, 200);
        });
    }
    $('label').css({
        'display': 'inline-block',
        'width': '30%'
    });
    $('input').css('width', '70%');
});

$('.col-1-2:eq(1)').on('click', function () {
    if ($('.right').width() <= $('.left').width()) {
        $('.left').stop().animate({
            'width': '20%'
        }, 300, function () {
            $('.right').stop().animate({
                'width': '80%'
            }, 200);
            $('textarea').animate({
                'height': '360px'
            }, 200);
        });
    }
    $('label').css({
        'display': 'block',
        'width': '100%'
    });
    $('input').css('width', '100%');
});
*/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................