JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li><div class="left">12345</div><div class="right">...</div></li>
<li><div class="left">123456</div><div class="right">...</div></li>
<li><div class="left">1234567</div><div class="right">...</div></li>
<li><div class="left">12345678</div><div class="right">...</div></li>
<li><div class="left">123456789</div><div class="right">...</div></li>
<li><div class="left">1234567890</div><div class="right">...</div></li>
</ul>
CSS
*
{
margin:0px;
padding:0px;
}
ul
{
display:table;
width:100%;
}
li
{
display:table-row;
}
li div
{
display:table-cell;
}
.left
{
width:1px;
background-color:blue;
color:white;
}
.right
{
background-color:gray;
}
JavaScript
if ($.browser.msie && $.browser.version == 7)
{
$("li div").wrap("<td />");
$("li").wrap("<tr />");
$("ul").wrapInner("<table />");
}