Simple Deffinition

by Trevin Avery

HTML

<div class="deffinition-container">
  <div class="deffinition has-num">
    <div class="deffinition-num">1</div>
    <div class="deffinition-text">
      This is the deffinition.
    </div>
  </div>
  <div class="deffinition has-num has-letter">
    <div class="deffinition-num">2</div>
    <div class="deffinition-letter">a</div>
    <div class="deffinition-text">
      This is the deffinition.
    </div>
  </div>
</div>

CSS

.deffinition {
  position: relative;
}

.deffinition-num {
  position: absolute;
  left: 0;
  top: 0;
}

.deffinition-letter {
  position: absolute;
  left: 33px;
  top: 0;
}

.deffinition.has-num .deffinition-text {
  padding-left: 33px;
}

.deffinition.has-letter .deffinition-text {
  padding-left: 66px;
}