JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <head>
        <title>Lines</title>
    </head>
    
    <body>
        <ol type="1" style="list-style-position:inside;">
            <li>Text</li>
            <li>Text</li>
            <li >longer Text, longer Text, longer Text, longer Text    second line of longer Text        </li>
        </ol>  
        <br/>
        <ul>
            <li>Text</li>
            <li>Text</li>
            <li>longer Text, longer Text, longer Text, longer Text    second line of longer Text                </li>
        </ul>
    </body>
    
</html>

CSS

ol 
{
    margin:0px;
    padding-left:15px;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 1em;
}

ul
{
    margin:0;
    padding-left:30px;
}

ul li 
{
    margin: 0px;
    padding: 0px;
    text-indent: 0.5em;
    margin-left: -0.5em;
}