JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo" id="bar">
    	<p> List on right causes my text to move down?</p>

    <ul>
        <li>why</li>
        <li>yes</li>
        <li>we</li>
        <li>do!</li>
        <li>why</li>
        <li>yes</li>
        <li>we</li>
        <li>do!</li>
        <li>why</li>
        <li>yes</li>
        <li>we</li>
        <li>do!</li>
    </ul>
</div>

CSS

.foo {
    display:table;
    width: 20em;
    height:20em;
}
.foo p {
    text-align: right;
    padding: 0 1em 0 0;
    border-right: 1px solid #999;
    display: table-cell;
    width: 10em;
    
}

#bar ul
{
    width: 10em;
    
    position:absolute
}
#bar li {
    float: left;
    width:2em;
    margin-right:3em;
    
}