JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://carolineelisa.com/indigo/2012/wp-content/themes/indigo/style.css">
<div id="secondary" class="sidebar aside">
    <div id="secondary-html-content-2" class="widget content2_block widget-content2_block">
        <div class="widget-wrap widget-inside">
            <h2>Booking tips</h2>
            <ol>
               <li>You may change your course or accommodation during your stay with 2 weeks notice. A fee may apply.</li>
               <li>Want to study with your friends or colleagues? Have a specific timetable in mind? We can arrange a special package for you. Prices on request.</li>
               <li>Accommodation prices depend on location, standard and season. Be aware that over New Year and Carnival prices triple at least!</li>
            </ol>
        </div>
    </div>
</div>

CSS

/* The website's style.css file is loaded as a jsFiddle Asset File */
/* The following below includes previous CSS Rules and new rules to make it work. */

#secondary ol {
    color:#F60;
    font-size: 16px;
    font-weight: bold;
    margin-bottom:0;
    margin-left: 0px;   /* Since 'ul,ol{}' setting in line 108 affects this selector, 'margin-left' is redefined. */
    list-style-position: inside;  /* This will place the number on top and inside of the current color of li */
}

.notes{
    color:#333;
    font-size: 14px;
    font-weight: normal;
    width: 230px;
    heigh: 50px;
    display: inline-block;
    vertical-align:text-top;
}

JavaScript

$(document).ready(function() {

    // Keep the current method that wraps a span with class on this selector.
    // That said, for a CSS only solution then use <p> tags in the li above, with style from class 'notes'.
    $('#secondary ol li').wrapInner('<span class="notes"> </span>');
    
});