JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<div style="border:1px red solid;">
    <div style="float:left;width:100px;border:1px green solid;height:500px;">Left column</div>
    <div style="margin:0 0 0 110px;border:1px black solid;">
        Text<br />
        before<br /> 
        ul<br />
        <ul> 
             <li class="left">
                Left111111111111111
            </li>
            <li class="right">
                Right11111111111111
            </li>  
            <li  class="left" >
                Left222222222222222
            </li>  
            <li>
                Right22222222222222
            </li>
        </ul>
        Text<br />
        after<br /> 
        ul<br /> 
    </div>
    <div class="clear"></div>
</div>

CSS

html, body {
 height: 100%; 
} 
.clear {
    clear:both;
}
.left {
    float:left;
}
.right {
    float:right;
}
ul {
    padding:0;
    color: blue;
    text-align: right;
}