How can I format my css text so that the result is in 2 columns?

Question

I want to recreate the following text in html and css:

So far, without css, I wrote in html:

<p><b>noun</b></p>
<p>1. an optical instrument, often attached to the eyepiece of a microscope, by which
the image of an external object is projected on a sheet of paper or
the like for tracing.</p>

But how can I divide the 1 and the rest of the text so it stays like in the original image?

Answer 1

Use an ordered list ( HTML element ol)

Example below:

<p><b>noun</b></p>
<ol>
  <li>an optical instrument, often attached to the eyepiece of a microscope, by which
the image of an external object is projected on a sheet of paper or
the like for tracing.
  </li>
</ol>

EDIT:

If you don't want to change your markup, there are other options upon which you can build upon.

For instance using a table and psuedo elements and a counter for the numbering:

 body {
    counter-reset: counter;
 }
.list {
  display: table;
}
.list:before {
  display: table-cell;
  counter-increment: counter;
  content: counter(counter) '.';
  padding-right: 5px;
}

<p><b>noun</b>
</p>
<p class="list">an optical instrument, often attached to the eyepiece of a microscope, by which the image of an external object is projected on a sheet of paper or the like for tracing.</p>
<p class="list">an optical instrument, often attached to the eyepiece of a microscope, by which the image of an external object is projected on a sheet of paper or the like for tracing.</p>