Text-overflow issue with CSS Table for Multi-line checkbox

Yesterday I was having issues with vertical alignment on this multi-line checkbox. Once that was working I attempted to make it somewhat responsive by having it fill the container its placed in and apply text-overflow elipses to the 3 text labels. This did not work.

HTML (inline css will be moved to scss once display issues are worked out)

<label style="margin-bottom:25px; display:table; table-layout:fixed;" title="checkbox">
  <div style="display:table-cell; width:34px">
    <span class="fancy-checkbox-multiline">
    <input type="checkbox" value="box">
    <span class="box">
        <span class="checker">
            <span class="mark"></span>
    </span>
    </span>
    </span>
  </div>
  <div style="display:table-cell; vertical-align:top; width:100%">
    <div style="display:table; table-layout:fixed;">
      <div style="display:table-cell; font-size:12px; line-height:12px; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;">
        This is the Primary label
      </div>
    </div>
    <div style="display:table; table-layout:fixed;">
      <div style="display:table-cell; font-size:10px; line-height:12px; max-width:50%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;">
        This is the 2nd label
      </div>
      <div style="display:table-cell; font-size:10px; line-height:12px; padding-left:10px; max-width:50%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;">
        This is the 3rd label
      </div>
    </div>
  </div>
  <div style="display:table-cell; padding-left:20px; line-height:24px;">55
  </div>
</label>

At this point my main question has become: Is there a better way to get format this checkbox then using a css table?

Here is a new JSfiddle http://ift.tt/29YN1xw