Why My Inline-Block Divs Are Not Aligned When Only One of Them Has Text

Why my inline-block divs are not aligned when only one of them has text?

This is the consequence of the "baseline" vertical alignment in CSS. From the CSS 2.1 spec, section 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

baseline

Align the baseline of the box with the baseline of the parent box. If the box
does not have a baseline, align the bottom margin edge with the parent's baseline. (my emphasis)

Because the default alignment for the inline-blocks is "baseline", unless it is overridden, this rule applies. When text is put in the inline-block, that text will create a baseline for the inline-block and the first (non-bolded) sentence applies.

When there is no text in the inline-block, then it has no baseline and so the second (bolded) sentence applies.

In the JSFiddle here: http://jsfiddle.net/WjCb9/1/ I have removed from your example the margin:1em which was creating (at least for me) a misleading illusion, and added the text baseline to show where the baseline of the containing box is. The baseline is along the bottom of the word "baseline", so you can see that the empty inline-block has its bottom margin edge aligned with the parent's baseline as required by the CSS rule above.

Two divs with inline-block style not aligned

By default, inline and inline-block elements are set to vertical-align: baseline.

Since your div.logo has a text input, div.form which is now an inline-block element, aligns itself on the baseline of the input.

Adding vertical-align: top to the CSS should fix it. As in:

div.logo, div.form { 
    display: inline-block;
    height: 200px;
    width: 200px;
    border: 1px dotted;
    vertical-align: top;
}

div.logo, div.form {     display: inline-block;    height: 200px;    width: 200px;    border: 1px dotted;    vertical-align:top;}

<div class="logo">  <input type="text"></div>
<div class="form">
</div>

.position-data {
    vertical-align: top;
}

div.canvas {
  background-image: url(//www.transparenttextures.com/patterns/asfalt-dark.png);
  padding: 100px 0;
  background-color: #F2E394;
  text-align: center;
}
div.col {
  width: 50%;
  display: inline-block;
vertical-align: top;
}
/* Device Mockups */
div#phone {
  width: 540px;
  height: 540px;
  background: url(//i.imgur.com/ieBaiQ1.png);
  background-size: contain;
  background-position: center center;
  position: relative;
  margin: 0 auto;
}
div#phone div.frame {
  position: absolute;
  top: 85px;
  bottom: 85px;
  left: 165px;
  right: 165px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  background: white;
}

<div class="canvas">  <div class="col">    <div id="phone">      <div class="frame">      </div>    </div>  </div><div class="col ta-l">    <h1>Header 1</h1>  </div></div>