diff --git a/src/pane-axis-element.coffee b/src/pane-axis-element.coffee
index ba0cb4b19..00304b65d 100644
--- a/src/pane-axis-element.coffee
+++ b/src/pane-axis-element.coffee
@@ -1,5 +1,6 @@
 {CompositeDisposable} = require 'event-kit'
 {callAttachHooks} = require './space-pen-extensions'
+PaneResizeHandleView = require './pane-resize-handle-view'
 
 class PaneAxisElement extends HTMLElement
   createdCallback: ->
@@ -22,13 +23,35 @@ class PaneAxisElement extends HTMLElement
         @classList.add('vertical', 'pane-column')
     this
 
+  isPaneResizeHandleElement: (element) ->
+    element?.classList.contains('pane-resize-handle')
+
   childAdded: ({child, index}) ->
     view = atom.views.getView(child)
-    @insertBefore(view, @children[index])
+    @insertBefore(view, @children[index * 2])
+
+    prevElement = view.previousSibling
+    # if previous element is not pane resize element, then insert new resize element
+    if prevElement? and not @isPaneResizeHandleElement(prevElement)
+      resizeView = new PaneResizeHandleView()
+      resizeView.initialize()
+      @insertBefore(resizeView[0], view)
+
+    nextElement = view.nextSibling
+    # if next element isnot resize element, then insert new resize element
+    if nextElement? and not @isPaneResizeHandleElement(nextElement)
+      resizeView = new PaneResizeHandleView()
+      resizeView.initialize()
+      @insertBefore(resizeView[0], nextElement)
+
     callAttachHooks(view) # for backward compatibility with SpacePen views
 
   childRemoved: ({child}) ->
     view = atom.views.getView(child)
+    siblingView = view.previousSibling
+    # make sure next sibling view is pane resize view
+    if siblingView?.classList.contains('pane-resize-handle')
+      siblingView.remove()
     view.remove()
 
   childReplaced:  ({index, oldChild, newChild}) ->
diff --git a/src/pane-resize-handle-view.coffee b/src/pane-resize-handle-view.coffee
new file mode 100644
index 000000000..111e143d1
--- /dev/null
+++ b/src/pane-resize-handle-view.coffee
@@ -0,0 +1,69 @@
+{$, View} = require 'atom-space-pen-views'
+
+module.exports =
+class PaneResizeHandleView extends View
+  @content: ->
+    @div class: 'pane-resize-handle'
+
+  initialize: ->
+    @handleEvents()
+
+  attached: ->
+    @isHorizontal = @parent().hasClass("horizontal")
+    @prevPane = @prev()
+    @nextPane = @next()
+
+  detached: ->
+
+  handleEvents: ->
+    @on 'dblclick', =>
+      @resizeToFitContent()
+    @on 'mousedown', (e) =>
+      @resizeStarted(e)
+
+  resizeToFitContent: ->
+    # clear flex-grow css style of both pane
+    @prevPane.css('flexGrow', '')
+    @nextPane.css('flexGrow', '')
+
+  resizeStarted: (e)->
+    e.stopPropagation()
+    $(document).on('mousemove', @resizePane)
+    $(document).on('mouseup', @resizeStopped)
+
+  calcRatio: (ratio1, ratio2, total) ->
+    allRatio = ratio1 + ratio2
+    [total * ratio1 / allRatio, total * ratio2 / allRatio]
+
+  getFlexGrow: (element) ->
+    parseFloat element.css('flexGrow')
+
+  setFlexGrow: (prevSize, nextSize) ->
+    flexGrow = @getFlexGrow(@prevPane) + @getFlexGrow(@nextPane)
+    flexGrows = @calcRatio(prevSize, nextSize, flexGrow)
+    @prevPane.css('flexGrow', flexGrows[0].toString())
+    @nextPane.css('flexGrow', flexGrows[1].toString())
+
+  fixInRange: (val, minValue, maxValue) ->
+    Math.min(Math.max(val, minValue), maxValue)
+
+  resizePane: ({pageX, pageY, which}) =>
+    return @resizeStopped() unless which is 1
+
+    if @isHorizontal
+      totalWidth = @prevPane.outerWidth() + @nextPane.outerWidth()
+      #get the left and right width after move the resize view
+      leftWidth = @fixInRange(pageX - @prevPane.offset().left, 0, totalWidth)
+      rightWidth = totalWidth - leftWidth
+      # set the flex grow by the ratio of left width and right width
+      # to change pane width
+      @setFlexGrow(leftWidth, rightWidth)
+    else
+      totalHeight = @prevPane.outerHeight() + @nextPane.outerHeight()
+      topHeight = @fixInRange(pageY - @prevPane.offset().top, 0, totalHeight)
+      bottomHeight = totalHeight - topHeight
+      @setFlexGrow(topHeight, bottomHeight)
+
+  resizeStopped: =>
+    $(document).off('mousemove', @resizePane)
+    $(document).off('mouseup', @resizeStopped)
diff --git a/static/panes.less b/static/panes.less
index cb8bb6565..f48224f61 100644
--- a/static/panes.less
+++ b/static/panes.less
@@ -11,12 +11,26 @@ atom-pane-container {
     display: -webkit-flex;
     -webkit-flex: 1;
     -webkit-flex-direction: column;
+
+    & > div.pane-resize-handle {
+      height: 8px;
+      z-index: 3;
+      cursor: ns-resize;
+      border-bottom: none;
+    }
   }
 
   atom-pane-axis.horizontal {
     display: -webkit-flex;
     -webkit-flex: 1;
     -webkit-flex-direction: row;
+
+    & > div.pane-resize-handle {
+      width: 8px;
+      z-index: 3;
+      cursor: ew-resize;
+      border-right: none;
+    }
   }
 
   atom-pane {