JSFiddle - React, Tailwind, and code Playground

HTML

<p class="clearfix"><img class="float-right" src="step 1.png"/></p>
<ol>
    <li>
      <p>Step 1</p>
      <p class="clearfix"><img class="float-right" src="step 2.png"/></p>
    </li>
    <li>
      <p>Step 2</p>
      <p class="clearfix">Step 3</p>
    </li>
</ol>

CSS

img { /* dummy */
  height: 100px;
  margin-bottom: 20px;
  background: red;
}

body { /* dummy */
  margin: 0 120px;
}
.clearfix {
  clear: both;
}
.float-right {
  float: right;
}