JSFiddle - React, Tailwind, and code Playground

by boushley

HTML

<p>
    This is a <span>sentence</span> yup.
</p>

<p>
    <button>This Should Be Wide, but it's not</button>
</p>

<ul>
    <li>These Should</li>
    <li>All</li>
    <li>Stack</li>
    <li>Next to one Another</li>
    <li>Instead They Overlap</li>
</ul>

CSS

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('https://www.betterment.com/wp-content/themes/superstar/fonts/Lato-Reg-webfont.svg') format('svg');
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'Lato';
        src: url('https://www.betterment.com/wp-content/themes/superstar/fonts/Lato-Reg-webfont.svg') format('svg');
    }
}

body, button {
    font-family: 'Lato';
}

ul li {
    float: left;
    list-style: none;
    margin-left: 5px;
}