You can consider CSS grid and a two column layout:
/* Counter */
ol {
list-style: none;
counter-reset: list-item-number;
}
li {
counter-increment: list-item-number;
display:grid;
grid-template-columns:auto 1fr;
grid-column-gap:5px
}
li::before {
content: counters(list-item-number, ".") " ";
/*grid-column:1 no need to specify it since it's by default */
}
li * {
grid-column:2; /* everything on the second column */
}
p {
margin-top:0;
}<ol>
<li>
Lorem Ipsum
<ol>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At
volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis.
Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere
lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget.
</p>
<p>
Augue ut lectus arcu bibendum at varius vel pharetra. Convallis tellus id interdum velit laoreet id donec. Auctor augue mauris augue neque gravida in fermentum. Volutpat diam ut venenatis tellus in. Commodo sed egestas egestas fringilla phasellus faucibus
scelerisque eleifend donec. In ornare quam viverra orci. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Aliquam ut porttitor leo a. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Volutpat diam ut venenatis
tellus in metus vulputate. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Dictum varius duis at consectetur lorem. Erat velit scelerisque in dictum non. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper
morbi. Elit duis tristique sollicitudin nibh. Suspendisse ultrices gravida dictum fusce ut placerat. Quis blandit turpis cursus in hac habitasse platea.
</p>
</li>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At
volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis.
Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere
lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget.
</p>
</li>
</ol>
</li>
<li>
Lorem Ipsum
<ol>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At
volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis.
Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere
lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget.
</p>
<p>
Augue ut lectus arcu bibendum at varius vel pharetra. Convallis tellus id interdum velit laoreet id donec. Auctor augue mauris augue neque gravida in fermentum. Volutpat diam ut venenatis tellus in. Commodo sed egestas egestas fringilla phasellus faucibus
scelerisque eleifend donec. In ornare quam viverra orci. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Aliquam ut porttitor leo a. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Volutpat diam ut venenatis
tellus in metus vulputate. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Dictum varius duis at consectetur lorem. Erat velit scelerisque in dictum non. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper
morbi. Elit duis tristique sollicitudin nibh. Suspendisse ultrices gravida dictum fusce ut placerat. Quis blandit turpis cursus in hac habitasse platea.
</p>
</li>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At
volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis.
Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere
lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget.
</p>
</li>
</ol>
</li>
</ol>Or a table layout:
/* Counter */
ol {
list-style: none;
counter-reset: list-item-number;
}
li {
counter-increment: list-item-number;
display:table-row;
}
li::before {
content: counters(list-item-number, ".") " ";
display:table-cell;
white-space:nowrap;
padding-right:5px;
}
p {
margin-top:0;
}<ol>
<li>
Lorem Ipsum
<ol>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At
volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis.
Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere
lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget.
</p>
<p>
Augue ut lectus arcu bibendum at varius vel pharetra. Convallis tellus id interdum velit laoreet id donec. Auctor augue mauris augue neque gravida in fermentum. Volutpat diam ut venenatis tellus in. Commodo sed egestas egestas fringilla phasellus faucibus
scelerisque eleifend donec. In ornare quam viverra orci. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Aliquam ut porttitor leo a. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Volutpat diam ut venenatis
tellus in metus vulputate. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Dictum varius duis at consectetur lorem. Erat velit scelerisque in dictum non. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper
morbi. Elit duis tristique sollicitudin nibh. Suspendisse ultrices gravida dictum fusce ut placerat. Quis blandit turpis cursus in hac habitasse platea.
</p>
</li>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At
volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis.
Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere
lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget.
</p>
</li>
</ol>
</li>
<li>
Lorem Ipsum
<ol>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At
volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis.
Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere
lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget.
</p>
<p>
Augue ut lectus arcu bibendum at varius vel pharetra. Convallis tellus id interdum velit laoreet id donec. Auctor augue mauris augue neque gravida in fermentum. Volutpat diam ut venenatis tellus in. Commodo sed egestas egestas fringilla phasellus faucibus
scelerisque eleifend donec. In ornare quam viverra orci. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Aliquam ut porttitor leo a. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Volutpat diam ut venenatis
tellus in metus vulputate. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Dictum varius duis at consectetur lorem. Erat velit scelerisque in dictum non. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper
morbi. Elit duis tristique sollicitudin nibh. Suspendisse ultrices gravida dictum fusce ut placerat. Quis blandit turpis cursus in hac habitasse platea.
</p>
</li>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At
volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis.
Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere
lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget.
</p>
</li>
</ol>
</li>
</ol>The content will adjust automatically in case you change the counter:
/* Counter */
ol {
list-style: none;
counter-reset: list-item-number 100;
}
li {
counter-increment: list-item-number;
display:table-row;
}
li::before {
content: counters(list-item-number, ".") " __ ";
display:table-cell;
white-space:nowrap;
padding-right:5px;
}
p {
margin-top:0;
}<ol>
<li>
Lorem Ipsum
<ol>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At
volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis.
Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere
lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget.
</p>
<p>
Augue ut lectus arcu bibendum at varius vel pharetra. Convallis tellus id interdum velit laoreet id donec. Auctor augue mauris augue neque gravida in fermentum. Volutpat diam ut venenatis tellus in. Commodo sed egestas egestas fringilla phasellus faucibus
scelerisque eleifend donec. In ornare quam viverra orci. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Aliquam ut porttitor leo a. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Volutpat diam ut venenatis
tellus in metus vulputate. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Dictum varius duis at consectetur lorem. Erat velit scelerisque in dictum non. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper
morbi. Elit duis tristique sollicitudin nibh. Suspendisse ultrices gravida dictum fusce ut placerat. Quis blandit turpis cursus in hac habitasse platea.
</p>
</li>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At
volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis.
Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere
lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget.
</p>
</li>
</ol>
</li>
<li>
Lorem Ipsum
<ol>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At
volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis.
Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere
lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget.
</p>
<p>
Augue ut lectus arcu bibendum at varius vel pharetra. Convallis tellus id interdum velit laoreet id donec. Auctor augue mauris augue neque gravida in fermentum. Volutpat diam ut venenatis tellus in. Commodo sed egestas egestas fringilla phasellus faucibus
scelerisque eleifend donec. In ornare quam viverra orci. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Aliquam ut porttitor leo a. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Volutpat diam ut venenatis
tellus in metus vulputate. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Dictum varius duis at consectetur lorem. Erat velit scelerisque in dictum non. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper
morbi. Elit duis tristique sollicitudin nibh. Suspendisse ultrices gravida dictum fusce ut placerat. Quis blandit turpis cursus in hac habitasse platea.
</p>
</li>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At
volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis.
Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere
lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget.
</p>
</li>
</ol>
</li>
</ol>