JSFiddle - React, Tailwind, and code Playground

by Tika Datta Pahadi

HTML

<h3>Left Alignment</h3>
<p>
    In left Alignment, the point of connection is left. So, the first element in the DOM gets the priority to attach to the left.
</p>
<ul class="left">
    <li class='first'> A </li>
    <li> B </li>
    <li> C </li>
    <li> D </li>
</ul>      
<br />
<h3>Right Alignment</h3>
<p>
    In right Alignment, the point of connection is right. So, the first element in the DOM gets the priority to attach to the right.
</p>
<ul class="right">
    <li class='first'> A </li>
    <li> B </li>
    <li> C </li>
    <li> D </li>
</ul>

CSS

ul{padding:0;margin:0}
li{
    display : inline-block;
    width : 50px;
    background : #e4e4e4;
    padding:5px
}
.left li{
    float : left
}
.right li{
    float : right
}

.first{
background:red
}