Ordered list on same line

Question

I am trying to create a dichotomous key using html and css. I would like '1.' to be on the same line as 'a.' with 'b.' directly below 'a.'. Currently they are all on separate lines.

What I have looks like this An example of what I want can be seen here

I have got as far as I have with thanks to this question for styling a ToC. Simplified versions welcome. Please see snippet for what I have so far.

Thanks in advance.

.ol {
  list-style-position: outside;
}

.list li {
  position: relative;
  overflow: hidden;
  list-style-type: lower-alpha;
  padding-left: 15px;
  text-indent: -15px;
}

.list li:after {
  content: ".................................................................................................................................";
  text-indent: 20px;
  display: block;
  letter-spacing: 10px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: -1;
}

.list li span {
  display: inline;
  background-color: #fff;
  padding-right: 1px;
}

.list li .number {
  float: right;
  font-weight: bold;
  background-color: #fff;
  padding-left: 10px;
}

<div class="container">
  <div class="row">
    <div>
      <ol>
        <li>
          <ol class="list">
            <li style="margin-bottom:1em;"><span style="padding-left:.1em;">2 small keels and a large median keel between them on each side of caudal peduncle; 6–10 dorsal and 6–10 anal finlets; no adipose eyelids</span><span class="number">2</span></li>
            <li class="list;" style="margin-bottom:2em;"><span style="padding-left:.1em;">2 small keels, but no large median keel on each side of caudal peduncle; 5 dorsal and 5 anal finlets; front and rear of eye covered with adipose eyelids</span><span class="number">10</span></li>
          </ol>
        </li>
        <li>
          <ol class="list">
            <li style="margin-bottom:1em;"><span style="padding-left:.1em;">2 lateral lines </span><span class="number"><em>Grammatorcynus bilineatus</em> (Double-lined mackerel)</span></li>
            <li style="margin-bottom:2em;"><span style="padding-left:.1em;">A single (upper) lateral line</span><span class="number">3</span></li>
          </ol>
        </li>
        <li>
          <ol class="list">
            <li style="margin-bottom:1em;"><span style="padding-left:.1em;">Teeth in jaws strong, compressed and knife-like; corselet of scales barely visible</span><span class="number">4</span></li>
            <li style="margin-bottom:2em;"><span style="padding-left:.1em;">Teeth in jaws slender, conical, barely compressed; corselet of scales well developed</span><span class="number">5</span></li>
          </ol>
        </li>
      </ol>
    </div>
  </div
</div>