Formatting Like a Word Doc

Question

I'm recreating a bunch of Word docs into webpages for a company's intranet website. I'm trying to find a better way to streamline the formatting and what not. This is what it currently looks like on the webpage: And I need it to look as closely to this as I can get where the text all stays formatted underneath each line rather than wrapping back underneath the number:

Here's a small snippet:

.secthead {
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 5px;
  padding-top: 15px;
  text-decoration: underline;
  padding-left: 25px;
}

dt {
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 5px;
  padding-top: 15px;
}

dd {
  padding: 5px 5px 5px 15px;
}

.sub {
  padding-left: 10px;
}

.def {
  padding-left: 50px;
}

<dl>
  <dt>6.0 <span class="secthead">PROCEDURE:</span></dt>
  <dd><span class="sub">6.4</span><span class="def">General tasks carried out by personnel involved primarily in Payroll functions are addressed in the Miscellaneous Payroll Functions Work Instruction. Typical functions addressed in this work instruction are as follows:
  <ul>
  <li>Employment Verifications </li>
  <li>New Hire reporting</li>
  <li>Payroll Bank Reconciliations</li>
  </ul>
  </span></dd>
</dl>

Answer 1

Force your number to go on the left side and make a block out of your content. Then align your list' bullet with the last two rules.

.secthead {
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 5px;
  padding-top: 15px;
  text-decoration: underline;
  padding-left: 25px;
}

dt {
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 5px;
  padding-top: 15px;
}

dd {
  padding: 5px 5px 5px 0px;
  margin: 0px 
}

.sub {
  float: left; 
}

.def {
  padding-left: 50px;
  display: block; 
}

ul  {
  padding-left:0;   
}
ul li  {
  list-style-position:inside
}

<dl>
  <dt>6.0 <span class="secthead">PROCEDURE:</span></dt>
  <dd><span class="sub">6.4</span><span class="def">General tasks carried out by personnel involved primarily in Payroll functions are addressed in the Miscellaneous Payroll Functions Work Instruction. Typical functions addressed in this work instruction are as follows:
  <ul>
  <li>Employment Verifications </li>
  <li>New Hire reporting</li>
  <li>Payroll Bank Reconciliations</li>
  </ul>
  </span></dd>
</dl>