JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<div class='row'>
  <div class="ember-view simple-checkbox">
    <input type="checkbox" class="simple-checkbox__input simple-checkbox__input--top">
    <div class="simple-checkbox__content">
      <div class="simple-checkbox__text">
        <div class="simple-checkbox__text--primary">
          Notify via email
        </div>
        <div class="simple-checkbox__text--hint">
          Send followers and email when this video is published
        </div>
      </div>
    </div>
  </div>
</div>

<div class='row'>
  <div class="ember-view simple-checkbox">
    <input type="checkbox" class="simple-checkbox__input simple-checkbox__input--top">
    <div class="simple-checkbox__content">
      <img src='http://www.twitch.tv/favicon.ico'>
    </div>
  </div>
</div>

SCSS

.simple-checkbox__input--top {
  vertical-align: top;
}

.simple-checkbox__input--middle {
  vertical-align: middle;
}

.simple-checkbox__content {
  display: inline-block;
}

.simple-checkbox__image {
  display: inline-block;
  vertical-align: middle;
}

.simple-checkbox__text {
  display: inline-block;
}

.simple-checkbox__text--hint {
  color: silver;
}

.row {
  margin: 15px 0;
}