JSFiddle - React, Tailwind, and code Playground

by fragphace

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<!--
When 100 is changed to 1000000, the "Love it" link moves to the next line while it should stay right aligned.
Please fix this problem.

Feel free to do what you would usually do to solve these kind of  problems.
You can use Google, Firebug, etc. Changing the HTML structure is OK too.
-->
<div class="content">
    <div class="container">
        <ul class="social">
            <li class="count">
                1000000 people love it
            </li>
            <li class="love">
                <a href="#">♥ Love it</a>
            </li>
        </ul>
    </div>
</div>

CSS

html {
    font-family: Arial, sans-serif;
}

a {
    text-decoration: none;
    color: #c32e28;
}

a:hover {
    text-decoration: underline;
}

.content {
    padding: 2em;
}

.container {
    background-color: #eee;
    width: 300px;
    margin: 0 auto;
}

.social {
    list-style-type: none;
    margin: 0;
    padding: 15px;
    overflow: hidden;
}

.social li {
    display: inline-block;
}

.count {
    float: left;
}

.love {
    float: right;
}