JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://via.placeholder.com/350x170">
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
<ul>
    <li>This is a list item</li>
    <li>This is a list item</li>
    <li>This is a list item</li>
    <li>This is a list item</li>
    <li>This is a list item</li>
</ul>

<hr>

<img src="http://via.placeholder.com/350x170">
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
<ul class="clear">
    <li>This is a list item</li>
    <li>This is a list item</li>
    <li>This is a list item</li>
    <li>This is a list item</li>
    <li>This is a list item</li>
</ul>

CSS

p, ul { margin-bottom: 20px; }

img {
 float: left;
 margin: 10px;
}

ul {
 border: 1px solid red;           
}

li {
 list-style-position: inside;
 list-style:disc;
 margin-left: 50px;
 border: 1px solid blue;
}

.clear {
  overflow: auto;
}