diff --git a/spec/pane-container-view-spec.coffee b/spec/pane-container-view-spec.coffee
index f8091ca86..61f44521c 100644
--- a/spec/pane-container-view-spec.coffee
+++ b/spec/pane-container-view-spec.coffee
@@ -74,13 +74,13 @@ describe "PaneContainerView", ->
   describe "serialization", ->
     it "can be serialized and deserialized, and correctly adjusts dimensions of deserialized panes after attach", ->
       newContainer = atom.workspace.getView(container.model.testSerialization()).__spacePenView
-      expect(newContainer.find('.pane-row > :contains(1)')).toExist()
-      expect(newContainer.find('.pane-row > .pane-column > :contains(2)')).toExist()
-      expect(newContainer.find('.pane-row > .pane-column > :contains(3)')).toExist()
+      expect(newContainer.find('atom-pane-axis.horizontal > :contains(1)')).toExist()
+      expect(newContainer.find('atom-pane-axis.horizontal > atom-pane-axis.vertical > :contains(2)')).toExist()
+      expect(newContainer.find('atom-pane-axis.horizontal > atom-pane-axis.vertical > :contains(3)')).toExist()
 
       newContainer.height(200).width(300).attachToDom()
-      expect(newContainer.find('.pane-row > :contains(1)').width()).toBe 150
-      expect(newContainer.find('.pane-row > .pane-column > :contains(2)').height()).toBe 100
+      expect(newContainer.find('atom-pane-axis.horizontal > :contains(1)').width()).toBe 150
+      expect(newContainer.find('atom-pane-axis.horizontal > atom-pane-axis.vertical > :contains(2)').height()).toBe 100
 
     describe "if there are empty panes after deserialization", ->
       beforeEach ->
@@ -90,14 +90,14 @@ describe "PaneContainerView", ->
       describe "if the 'core.destroyEmptyPanes' config option is false (the default)", ->
         it "leaves the empty panes intact", ->
           newContainer = atom.workspace.getView(container.model.testSerialization()).__spacePenView
-          expect(newContainer.find('.pane-row > :contains(1)')).toExist()
-          expect(newContainer.find('.pane-row > .pane-column > atom-pane').length).toBe 2
+          expect(newContainer.find('atom-pane-axis.horizontal > :contains(1)')).toExist()
+          expect(newContainer.find('atom-pane-axis.horizontal > atom-pane-axis.vertical > atom-pane').length).toBe 2
 
       describe "if the 'core.destroyEmptyPanes' config option is true", ->
         it "removes empty panes on deserialization", ->
           atom.config.set('core.destroyEmptyPanes', true)
           newContainer = atom.workspace.getView(container.model.testSerialization()).__spacePenView
-          expect(newContainer.find('.pane-row, .pane-column')).not.toExist()
+          expect(newContainer.find('atom-pane-axis.horizontal, atom-pane-axis.vertical')).not.toExist()
           expect(newContainer.find('> :contains(1)')).toExist()
 
   describe "pane-container:active-pane-item-changed", ->
diff --git a/spec/pane-view-spec.coffee b/spec/pane-view-spec.coffee
index 05a84ad1b..6c8897c55 100644
--- a/spec/pane-view-spec.coffee
+++ b/spec/pane-view-spec.coffee
@@ -289,7 +289,7 @@ describe "PaneView", ->
       expect(paneModel.isActive()).toBe true
 
   describe "when a pane is split", ->
-    it "builds the appropriate pane-row and pane-column views", ->
+    it "builds the appropriateatom-pane-axis.horizontal and pane-column views", ->
       pane1 = pane
       pane1Model = pane.getModel()
       pane.activateItem(editor1)
@@ -300,11 +300,11 @@ describe "PaneView", ->
       pane2 = containerModel.getView(pane2Model).__spacePenView
       pane3 = containerModel.getView(pane3Model).__spacePenView
 
-      expect(container.find('> .pane-row > atom-pane').toArray()).toEqual [pane1[0]]
-      expect(container.find('> .pane-row > .pane-column > atom-pane').toArray()).toEqual [pane2[0], pane3[0]]
+      expect(container.find('> atom-pane-axis.horizontal > atom-pane').toArray()).toEqual [pane1[0]]
+      expect(container.find('> atom-pane-axis.horizontal > atom-pane-axis.vertical > atom-pane').toArray()).toEqual [pane2[0], pane3[0]]
 
       pane1Model.destroy()
-      expect(container.find('> .pane-column > atom-pane').toArray()).toEqual [pane2[0], pane3[0]]
+      expect(container.find('> atom-pane-axis.vertical > atom-pane').toArray()).toEqual [pane2[0], pane3[0]]
 
   describe "serialization", ->
     it "focuses the pane after attach only if had focus when serialized", ->
diff --git a/spec/workspace-view-spec.coffee b/spec/workspace-view-spec.coffee
index 11e419236..b5b2b46c5 100644
--- a/spec/workspace-view-spec.coffee
+++ b/spec/workspace-view-spec.coffee
@@ -82,10 +82,10 @@ describe "WorkspaceView", ->
           simulateReload()
 
           expect(atom.workspaceView.getEditorViews().length).toBe 4
-          editorView1 = atom.workspaceView.panes.find('.pane-row > atom-pane .editor:eq(0)').view()
-          editorView3 = atom.workspaceView.panes.find('.pane-row > atom-pane .editor:eq(1)').view()
-          editorView2 = atom.workspaceView.panes.find('.pane-row > .pane-column > atom-pane .editor:eq(0)').view()
-          editorView4 = atom.workspaceView.panes.find('.pane-row > .pane-column > atom-pane .editor:eq(1)').view()
+          editorView1 = atom.workspaceView.panes.find('atom-pane-axis.horizontal > atom-pane .editor:eq(0)').view()
+          editorView3 = atom.workspaceView.panes.find('atom-pane-axis.horizontal > atom-pane .editor:eq(1)').view()
+          editorView2 = atom.workspaceView.panes.find('atom-pane-axis.horizontal > atom-pane-axis.vertical > atom-pane .editor:eq(0)').view()
+          editorView4 = atom.workspaceView.panes.find('atom-pane-axis.horizontal > atom-pane-axis.vertical > atom-pane .editor:eq(1)').view()
 
           expect(editorView1.getEditor().getPath()).toBe atom.project.resolve('a')
           expect(editorView2.getEditor().getPath()).toBe atom.project.resolve('b')
diff --git a/src/pane-axis-element.coffee b/src/pane-axis-element.coffee
index fa517e716..3dbb96a6d 100644
--- a/src/pane-axis-element.coffee
+++ b/src/pane-axis-element.coffee
@@ -17,9 +17,9 @@ class PaneAxisElement extends HTMLElement
 
     switch @model.getOrientation()
       when 'horizontal'
-        @classList.add('pane-row')
+        @classList.add('horizontal', 'pane-row')
       when 'vertical'
-        @classList.add('pane-column')
+        @classList.add('vertical', 'pane-column')
 
   childAdded: ({child, index}) ->
     view = @model.getView(child)
@@ -39,6 +39,4 @@ class PaneAxisElement extends HTMLElement
   hasFocus: ->
     this is document.activeElement or @contains(document.activeElement)
 
-module.exports = PaneAxisElement = document.registerElement 'atom-pane-axis',
-  prototype: PaneAxisElement.prototype
-  extends: 'div'
+module.exports = PaneAxisElement = document.registerElement 'atom-pane-axis', prototype: PaneAxisElement.prototype
diff --git a/static/panes.less b/static/panes.less
index 2451199a3..e7f5b7faa 100644
--- a/static/panes.less
+++ b/static/panes.less
@@ -7,13 +7,13 @@
   display: -webkit-flex;
   -webkit-flex: 1;
 
-  .pane-column {
+  atom-pane-axis.vertical {
     display: -webkit-flex;
     -webkit-flex: 1;
     -webkit-flex-direction: column;
   }
 
-  .pane-row {
+  atom-pane-axis.horizontal {
     display: -webkit-flex;
     -webkit-flex: 1;
     -webkit-flex-direction: row;
diff --git a/static/workspace-view.less b/static/workspace-view.less
index 55fdbd03b..d1f88b55a 100644
--- a/static/workspace-view.less
+++ b/static/workspace-view.less
@@ -28,14 +28,14 @@ h6 {
   background-color: @app-background-color;
   font-family: @font-family;
 
-  .horizontal {
+  > .horizontal {
     display: -webkit-flex;
     height: 100%;
-  }
 
-  .vertical {
-    display: -webkit-flex;
-    -webkit-flex: 1;
-    -webkit-flex-flow: column;
+    > .vertical {
+      display: -webkit-flex;
+      -webkit-flex: 1;
+      -webkit-flex-flow: column;
+    }
   }
 }