[RbnJrg]

The solution by enuddleyarbl is very good but if you want to insist on your own list and numbering, use the following code, which is valid even for epub2:

1. In your .xhtml file:

  <p class="list"><span class="col1">1(a.i)</span><span class="col2">This is the text for the first item in the list</span></p>

  <p class="list"><span class="col1">1(a.ii)</span><span class="col2">This is the text for the second item in the list</span></p>

  <p class="list"><span class="col1">1(a)</span><span class="col2">This is the text for the first item in the list</span></p>

  <p class="list"><span class="col1">1(b)</span><span class="col2">This is the text for the second item in the list</span></p>

2. In your .css stylesheet:

p.list {
  margin: 0;
}

.col1 {
  display: inline-block;
  width: 15%; /* you can play with this percentage */
  padding-right: 10px; /* you can play with the padding value */
  margin: 0;
  vertical-align: top;
  text-align: right;
}

.col2 {
  display: inline-block;
  width: 76%; /* you can play with this percentage */
  padding: 0;
  margin: 0 5% 1em 0; /* you can play with the margin-right percentage */
  vertical-align: top;
  text-align: justify;
}

Here you have a screenshot:



Take into account that the percentage of .col1 plus percentage of .col2 plus percentage of margin-right must be lower than 99% (because of the padding of .col1). Of course, this aproximation under epub2 is very sensitive to changing the font size. You can minimize this danger by increasing the size of the first column and reducing the size of the second. To get a dinamic layout to automatically change column widths as the font size changes, you need to work in epub3. Below you can check the respective epub2.