JSFiddle - React, Tailwind, and code Playground

by mckabue

HTML

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<h2>One line, perfect!</h2>
<ul>
    <li>This stays on one line</li>
    <li>And this</li>
    <li>But this can multiline but must be 100% of viewport</li>
</ul>

<h2>Multi lines, nope.</h2>
<ul>
    <li>This stays on one line</li>
    <li>And this</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.</li>
</ul>

CSS

ul {
    display: table;
    width: 100%;
    color: #fefefe;
    background: #ccc;
    margin-bottom: 20px;
}

li {
    vertical-align: top;
	display: table-cell;
	border-right: 1px solid red;
    padding: 10px;
    margin: 0;
    background: #2c2c2c;
    text-align: center;
    height: 100%;
    font-size: 16px;
}