           @label outlet: "message", class: "side-label"
         @label "Title (Alt)", class: "message"
         @subview "titleEditor", new EditorView(mini: true)
-        @label "Width", class: "message"
-        @subview "widthEditor", new EditorView(mini: true)
-        @label "Height", class: "message"
-        @subview "heightEditor", new EditorView(mini: true)
+        @div class: "col-1", =>
+          @label "Width (px)", class: "message"
+          @subview "widthEditor", new EditorView(mini: true)
+        @div class: "col-2", =>
+          @label "Height (px)", class: "message"
+          @subview "heightEditor", new EditorView(mini: true)
       @div class: "image-container", =>
         @img outlet: 'imagePreview'
 

      @widthEditor.setText("")
      @heightEditor.setText("")

  openImageDialog: ->
    files = dialog.showOpenDialog
      properties: ['openFile']
      defaultPath: atom.project.getPath()
    return unless files
    file = files[0]
    @imgEditor.setText(file)
    @displayImagePreview(file)
    @titleEditor.focus()

  isValidImageFile: (file) ->
    path.extname(file).toLowerCase() in imageExtensions

  generateImageUrl: (file) ->
    return file if utils.isUrl(file)

    else
      @titleEditor.setText(selection)

  openImageDialog: ->
    files = dialog.showOpenDialog
      properties: ['openFile']
      defaultPath: atom.project.getPath()
    return unless files
    @imgEditor.setText(files[0])
    @displayImagePreview(files[0])
    @titleEditor.focus()

  displayImagePreview: (file) ->
    return if @imageOnPreview == file

    if @isValidImageFile(file)
      @imageOnPreview = file
      @message.text("Opening Image Preview ...")
      @imagePreview.attr("src", @resolveImageUrl(file))
      @imagePreview.load =>
        @message.text("")
        @widthEditor.setText("" + @imagePreview.context.naturalWidth)
