JSFiddle - React, Tailwind, and code Playground

HTML

<div calss="oringal">
<ul  class="rank">
    <li class="rank-1">
        <img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/Tetra_pak_New_packaging_Juice7_by_KATOK.jpg" />
        <p>1</p>
    </li>
    <li class="rank-2">
        <img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/21.jpg" />
        <p>2</p>
    </li>
    <li class="rank-3">
        <img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/10.jpg" />
        <p>3</p>
    </li>
</ul>
    <br />
</div>

<div class="description"> I want to get the ranking sequence as follows, but i do not want change the html, how can i just change the css in the div.oringal to get the ranking sequence as follows.first in center, second rights, third lefts</div>
<div>
  <ul  class="rank">
    <li class="rank-3">
        <img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/10.jpg" />
        <p>3</p>
    </li>
    <li class="rank-1">
        <img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/Tetra_pak_New_packaging_Juice7_by_KATOK.jpg" />
        <p>1</p>
    </li>
    <li class="rank-2">
        <img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/21.jpg" />
        <p>2</p>
    </li>
</ul>  
</div>

CSS

div{display:block; width: 460px; padding-bottom:20px;}
ul.rank{
    list-style: none outside none;
    padding: 0;
    margin: 0;
}
ul.rank li{
    float:left;
    border:1px solid red;
}
ul.rank img {width:150px; height:90px;}
p {
    text-align:center;
}