<span>I am<br />float</span>
<p>Paragraph</p>
<ul>
    <li>This is a list</li>
    <li>It is next to a float</li>
    <li>Things are not broken!</li>
    <li>So happy</li>
</ul>
<p>Looking good!</p>

<hr />

<span>I am<br />float</span>
<p>Paragraph</p>
<ol>
    <li>This is a list</li>
    <li>It is next to a float</li>
    <li>Things are not broken!</li>
    <li>So happy</li>
</ol>
<p>Looking good!</p>

span {
    float: left;
    background: red;
    color: white;
    margin: 0 1rem 1rem 0;
    padding: 1rem;
}

/* A comprehensive opioned solution */

:where(:root) {
	--ol-indent: 2em;
	--ul-indent: 1.375em;
}

:where(:root),
:where([dir='ltr']) {
	--dir-adjust: 1;
}

:where([dir='rtl']) {
	--dir-adjust: -1;
}

:where(ol) {
	margin-block: 1rem;
	margin-inline: 0 var(--ol-indent);
	padding: 0;
	transform: translateX(calc(var(--dir-adjust) * var(--ol-indent)));
}

:where(ul) {
	margin-block: 1rem;
	margin-inline: 0 var(--ul-indent);
	padding: 0;
	transform: translateX(calc(var(--dir-adjust) * var(--ul-indent)));
}

:where(li)::marker {
	font-family: ui-monospace, monospace;
	font-size: 1em;
	line-height: 1.45rem;
}

:where(dl, ol, ul) :where(dl, ol, ul) {
	margin-block: 0;
}

/* minimal styles to make things prettier */

body {
    /* https://modernfontstacks.com/ */
    --classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro,
        sans-serif;
    font-family: var(--classical-humanist);
    font-size: 1.125rem;
    margin: auto;
    max-width: 30rem;
    padding: 1rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.