title: checkbox inside css3 flex box
body: <p>This css is trying to have a check box to the left of the label and make both clickable. The element is inside a flex container as in the code but what I am getting is a check box and a label under it not to the left of it.  How can I fix this? Thanks.</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>.flex-column-item {
      padding: 0.3em 2%;
  }
  
  .flex-column-container {
      margin: 1em 0;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-flow: column ;
      -ms-flex-flow: column ;
      flex-flow: column ;
  }
  
  .flex-container {
      margin: 1em 0;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
  }
  .left {
      -webkit-align-self: flex-start;
      align-self: flex-start;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template name="content"&gt;
    {{#if Template.subscriptionsReady}}
      &lt;form class="flex-column-container"&gt;
        {{#each this.items}}
          &lt;div class="flex-column-item"&gt;
            {{&gt; checkbox}}
          &lt;/div&gt;
        {{/each}}
      &lt;/form&gt;
    {{/if}}
  &lt;/template&gt;
  
  
  &lt;template name="checkbox"&gt;
    &lt;div class="flex-container"&gt;
      &lt;label&gt;
        &lt;input class="left" type="checkbox" name={{name}} data-name="{{name}}"&gt;{{label}}
      &lt;/label&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>