Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="data-row">
  <div class="data-row__checkbox">
    <input type="checkbox" id="bulk-edit">
    <label for="bulk-edit"></label>
  </div>

  <img class="data-row__image" src="http://placehold.it/50x50">
  <span class="data-row__title">Item Title</span>
  
  
  <div class="data-row__right">
    <span class="data-row__info">matt@create.net</span>
    <ul class="data-row__controls list list--bare list--inline">
      <li><div class="toggle"></div></li>
      <li><span class="i">I</span></li>
      <li><span class="i">O</span></li>
      <li><span class="i">X</span></li>
    </ul>
  </div>
  

</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// The Hacky bits for this demo
.toggle {
  height: 10px;
  width: 30px;
  background: red;
}
%reset-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
* {
  box-sizing: border-box;
}
body {
  background: #f3f4f4;
}



// For the pattern lib
.list {
  &--inline {
    @extend %reset-list;
    li {
      display: inline-block;
    }
  }
}


$spacing-unit: 10px;

.data-row {
  width: 100%;
  height: 50px;
  background: white;
  border: 1px solid #ddd;
  padding: $spacing-unit;
  position:relative;
  
  &__title,
  &__image,
  &__checkbox,
  &__info,
  &__controls {
    display: inline-block;
    margin-right: $spacing-unit;
  }

  &__info {
    color: #999;
  }

  &__right {
    position: absolute;
    right: $spacing-unit;
    top: 50%;
    transform:translateY(-50%);
  }
  
}


img {
  height: 30px;
  vertical-align: middle;
}

SassMeister-output.css

.toggle{height:10px;width:30px;background:red}.list--inline{margin:0;padding:0;list-style:none}*{box-sizing:border-box}body{background:#f3f4f4}.list--inline li{display:inline-block}.data-row{width:100%;height:50px;background:white;border:1px solid #ddd;padding:10px;position:relative}.data-row__title,.data-row__image,.data-row__checkbox,.data-row__info,.data-row__controls{display:inline-block;margin-right:10px}.data-row__info{color:#999}.data-row__right{position:absolute;right:10px;top:50%;transform:translateY(-50%)}img{height:30px;vertical-align:middle}

SassMeister-rendered.html

<div class="data-row">
  <div class="data-row__checkbox">
    <input type="checkbox" id="bulk-edit">
    <label for="bulk-edit"></label>
  </div>

  <img class="data-row__image" src="http://placehold.it/50x50">
  <span class="data-row__title">Item Title</span>
  
  
  <div class="data-row__right">
    <span class="data-row__info">matt@create.net</span>
    <ul class="data-row__controls list list--bare list--inline">
      <li><div class="toggle"></div></li>
      <li><span class="i">I</span></li>
      <li><span class="i">O</span></li>
      <li><span class="i">X</span></li>
    </ul>
  </div>
  

</div>