JSFiddle - React, Tailwind, and code Playground

by ttamminen

HTML

<div class="button">
    <span class="text">Tekstiä</span>
    <div class="icon">Ikoni</div>
</div>

SCSS

.button {
    border: 1px solid black;    
    max-width: 200px;
    
    /* clearfix */
    &:before,
    &:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }
    
    &:after {
        clear: both;
    }
    
    /**
     * For IE 6/7 only
     * Include this rule to trigger hasLayout and contain floats.
     */
    *zoom: 1;  
    
    span.text {
        border: 1px solid green;
        float: left;
        display: inline-block;
    }
    
    div.icon {
        border: 1px solid green;
        float: right;
        display: inline-block;
    }
}