CSS: Getting indent to work

Question

I'm trying to put space before the numbering. However, I'm not able to put spaces on the second line.

For example, I would like in this format below:

    1. This is a question. The second line will have to be indent as well. 
       Testing on second line now. 
       THIS IS AN ANSWER SECTION.

However, I'm only able to get this below:

1. This is a question. The second line will have to be indent as well. 
Testing on second line now. 
   THIS IS AN ANSWER SECTION.

I've made a fiddle here: https://jsfiddle.net/96a7hmq5/15/ Please click on the question to show more.

Answer 1

I know this may go without saying, but if you just use an ordered list, the indent would be handled automatically.

<ol>
  <li>This is a question. The second line will have to be indent as well.<br/>
Testing on second line now. <br/>
THIS IS AN ANSWER SECTION.
  </li>
  <li>This is the 2nd numbered item.<br>
This is the second line of the 2nd item<br>
ANSWER LINE HERE
  </li>
</ol>

Answer 2

You can use data attributes for numbers

<h4 class="accordion-toggle" data-number="1.">

and set your h4 position relative and add after pseudo class and set content as your number.

Final result

    .accordion-toggle{
      position:relative;
      display: block;
      margin-left: 10px;;
    }


    .accordion-toggle:before{
      position: absolute;
      left: -15px;
      top:0px;
      content: attr(data-number);
    }