JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&lt;link href=&#39;http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<div id="card">
                <div class="name">
                    <h1>Chen</h1>
                    <div class="bar bar-blue"></div>
                </div>            
                <div class="faction">
                    <h2>The Radiant</h2>
                    <div class="bar bar-green"></div>
                </div>
            </div>

SCSS

#card {
        float: left;
        overflow: hidden;
        width: 275px;
        border:1px solid red;

        .name {
            overflow:hidden;

            h1 {
                float: left;
                font-family: 'Open Sans Condensed',sans-serif;
                font-size: 28px;
                font-weight: normal;
            }
        }

        .faction {
            overflow:hidden;

            h2 {
                float: left;
                font-family: 'Open Sans Condensed',sans-serif;
                font-size: 17px;
                font-weight: normal;
            }
        }
    }

.bar {
    float: left;
    height: 10px;
    margin-left: 6px;
    margin-top: 15px;
    width: 70%;
}

.bar-blue {
    background-color:#265068;
}

.bar-green {
    background-color:#39471c;
}