Vertically align block-level element in a list item within a nested list using counters?

Question

I have a nested list with counters:

1   Foo
1.1 Foo Foo
2   Bar
2.1 Bar Bar

Now I have multiline text in my subitems but do not want them to flow around the counter like they normally do.

1.1 Lorem
Ipsum

Instead, I want the whole text to be horizontally aligned.

1.1 Lorem
    Ipsum

So my next idea was to include a paragraph (or any kind of block-level element for that matter) within the list item so the text will be neatly aligned.

1.1
Lorem
Ipsum

But this introduces another problem as the text does not start on the line of the counter anymore.

So my genius idea was to just give the p-tag some relative repositioning so it appears where I want it.

 /* Counter */ ol { list-style: none; counter-reset: list-item-number; } li { counter-increment: list-item-number; } li::before { content: counters(list-item-number, ".") " "; } /* Align the P */ ol li ol li p { position: relative; top: -2em; /* THIS NEVER PROPERLY ALIGNS: */ left; 2em; }

 <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> </ol> </li> </ol>

But if you try this you'll notice that the top is never properly vertically aligned with the text. Even when I'm trying to be pixel-perfect I'm always off by one or two pixels. Why is that? Does anybody have any idea that might help me out? Or maybe my whole approach is utterly stupid - in that case, please tell me as well. :)

Also - I can only use CSS2 as this is going into a 3rd-party PDF renderer (Salesforce, to be specific) that has been really updated for the last 12 years.

Answer 1

You can use position: absolute in ::before

 /* Counter */ ol { list-style: none; counter-reset: list-item-number; } li { counter-increment: list-item-number; position: relative } li::before { content: counters(list-item-number, ".") " "; position: absolute; left: -2em; top: 0; /* to keep the same distance from counter to text */ text-align: right; /*whatever you prefer here */ width: 20px; }

 <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> </ol> </li> </ol>

Answer 2

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>